例子： 1.给元素固有属性赋值 下面是定义container容器的宽度，如果<725就为自己的宽度，否则就等于725，相当于max-width:725px;。 　　<style type="text/css" media="screen"> 　　#container { width: expression((documentElement.clientWidth > 725) ? "725px" : "auto" ); } 　　</style> 　　2.给元素自定义属性赋值 例如，消除页面上的链接虚线框。 通常的做法是： 　　<a href="link1.htm" onfocus="this.blur()">link1</a> 　　<a href="link2.htm" onfocus="this.blur()">link2</a> 　　<a href="link3.htm" onfocus="this.blur()">link3</a> 　　粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？ 　　采用expression的做法如下： 　　<style type="text/css"> 　　a {star : expression(this.onFocus=this.blur());} 　　</style> 　　<a href="link1.htm">link1</a> 　　<a href="link2.htm">link2</a> 　　<a href="link3.htm">link3</a> 　　说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本， 在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。OK，这样就很容易 地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移 进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为 　　<style type="text/css"> 　　input {star : expression(onmouseover=this.style.backgroundColor="#F5F5F5"; 　　onmouseout=this.style.backgroundColor="#FFFFFF")} 　　</style> 　　<input type="text"> 　　<input type="text"> 　　<input type="text"> 　　可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示： 　　<style type="text/css"> 　　input {star : expression(onmouseover=function() 　　{this.style.backgroundColor="#FF0000"}, 　　onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) } 　　</style> 　　<input type="text"> 　　<input type="text"> 　　<input type="text"> 　　注意:不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高。

可能的值

细边线table表格样式

table {width:100%; border:1px solid #ccc; border-collapse:collapse;}
table td {border:1px solid #ccc; border-collapse:collapse; padding:10px 15px; color:#999;}

下划线"_"：ie6支持 ie7 firefox不支持

!important; ： firefox ie7支持 ，ie6部分支持

IE6支持重定义中的!important，例如： 　　.yuanxin {color:#e00!important;} 　　.yuanxin {color:#000;} 　　你将会发现定义了样式class="yuanxin"时，在IE下，字体显示为红色（#e00）。 　　但不支持同一定义中的!important。例如： 　　.yuanxin {color:#e00!important;color:#000} 　　此时在IE6下不支持，你将会发现定义了样式class="yuanxin"时，字体显示为黑色（#000）。

HTML头部引用(if IE)Hack：针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。

选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6

以: " #demo {width:100px;} "为例;

#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/

* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */

*+html #demo {width:130px;} /*会被IE7执行*/ ---------------

所以最后,#demo的宽度在三个浏览器的解释为:

FIREFOX:100px;

ie6:120px;

ie7:130px;

IE8 最新css hack：

"\9"　例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox.

"\0"　IE8识别，IE6、IE7不能.

IE6 hack

_background-color:#CDCDCD; /* ie 6*/

IE7 hack

*background-color:#dddd00; /* ie 7*/

IE8 hack

background-color:red\0; /* ie 8/9*/

IE9 hack

background-color:blue\9\0;

<ul id="nav">
<li><a href="#">这是显示的标题1</a>
<ul>
<li><a href="#">这是列表中的内容1</a></li>
<li><a href="#">这是列表中的内容2</a></li>
<li><a href="#">这是列表中的内容3</a></li>
<li><a href="#">这是列表中的内容4</a></li>
</ul>
</li>
<li><a href="#">这是显示的标题2</a>
<ul>
<li><a href="#">这是列表中的内容5</a></li>
<li><a href="#">这是列表中的内容6</a></li>
<li><a href="#">这是列表中的内容7</a></li>
<li><a href="#">这是列表中的内容8</a></li>
</ul>
</li>
</ul>

CSS样式代码

#nav, #nav ul{ /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav li{ /* all list items */
float: left;
width: 10em;
}
#nav li ul{ /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers 这里用left:-999em的也行,用display:none的也行,看您喜欢用啥 */
}
*+ html #nav li ul{margin: 16px 0 0 -95px;} /* 二级菜单显示位置调整IE7 */
*html #nav li ul{margin: 16px 0 0 -95px;} /* 二级菜单显示位置调整 IE6 */
#nav li:hover ul, #nav li.sfhover ul{
left: auto;/* 如果上面用left的了,那么这就不用改,最多改个数,如果用display:none了,那么这里改成display:block*/
}

由于ie6不支持li:hover ,所以#nav li:hover ul,失效，必须使用js控制样式sfhover，需要在头部添加以下js代码：

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover =function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>

<ul id="nav">
<li><a href="<?url ctrl=home?>">首 页</a></li>
<li><a href="#">|</a></li>
<li><a href="#">关于我们</a>
<!-- 下拉部分-->
<ul><li><a href="#">公司简介</a></li>
<li><a href="#">总经理致辞</a></li>
</ul></li>
<!-- 下拉部分-->
</ul>

js就几行代码：

<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>

css代码：

#nav {
line-height: 24px; list-style-type: none;
}
#nav a {
display: block; text-align:center;
}
#nav a:link {
color:#a6ce38; text-decoration:none;
}
#nav a:visited {
color:#a6ce38;text-decoration:none;
}
#nav a:hover {
color:#F00; text-decoration:none;;
}
#nav li {
float: left; padding-left:15px; font-family:"微软雅黑"; font-size:14px;
}
#nav li a:hover{
color:#F00;
}
#nav li ul {
line-height:18px; list-style-type: none;text-align:left;
left: -999em; width:120px; position: absolute;

}
#nav li ul li{
background: #FFF;/*没有背景在ie6下会有一点小问题*/
float:left; width:100px;
font-family:"微软雅黑"; font-size:12px; color:#F00;
margin:0px;padding:0;
clear:both;
}
#nav li ul a{
display: block; width:100px;text-align:left;
}
#nav li ul a:link {
color:#a6ce38; text-decoration:none;
}
#nav li ul a:visited {
color:#a6ce38; text-decoration:none;
}
#nav li ul a:hover {
color:#FFF; text-decoration:none;
background:#F00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}