一个困扰偶的IE6、IE8兼容问题

这两天一直被一个ie6ie8的兼容问题困扰,有段样式在ie8中显示正常,如图:

00

ie6下却显示成这样:

01

 

其对应的CSS样式,如下:


.Select {
background:url(../images/tag_title.gif) repeat-x 0 top;
margin-bottom:10px;
}
.Select dl {
border-top:1px dashed #CDE7FB;
margin:0 5px;
overflow:hidden;
padding:5px 0;
}
.Select dt {
float:left;
font-weight:bold;
text-align:right;
width:120px;
}
.Select dd {
float:left;
overflow:hidden;
width:auto;
}
.Select dd div {
float:left;
margin-right:15px;
}
.Select dd a:hover,.Select dd a:hover span, {
background:#4598D2 none repeat scroll 0 0;
color:#FFFFFF;
}
.Select dd a { color:#005aa0;
display:block;
text-decoration:none;
white-space:nowrap;
}
a:link, a:visited {
color:#222222;
}
a {
text-decoration:none;
}
.select_all{ background:#4598d2; padding:0 2px;}
.Select dd .select_all a{ color:#FFF}


 

这两天,我把这段CSS上看下看N遍,也没发现一句是ie6 不能解读的,汗!

今天早上又把“京东商城”上的这段相关样式CODE看了一遍,竟然有大发现,在定义.Select dl {} 中有句 zoom:1; 我上面的css中没有,以前从没用过这个关键字,对其了解几乎为零。查了查,先认识zoom

继承性: 无
 兼容性: IE
基本语法:zoom : normal | number
语法取值:
  normal  :  默认值。使用对象的实际尺寸
  number  :  百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值
使用说明:
设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承,但是它会影响对象的所有子对象( children )。这种影响很像 background 和 filter 属性导致的变化。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
换句话说,用css中的zoom属性可以让网页实现IE7中的放大缩小功能。比如你在css样式表中把zoom设为1就是和原来一样大小。

 

我在上段CSSSelect dl {}中加上了zoom:1; 这句,再刷新ie6,哇~ !筛选条目排列得跟ie8一样整齐了。

 

 

 

 

Tags: , , , ,       固定链接:http://sychen.org/?p=162



One Comment to “一个困扰偶的IE6、IE8兼容问题”

  1. Lin.x says:

    回头试试这段….
    初看貌似是没有清除浮动…

Leave a Reply