这段代码 在IE6 就变形了
其他浏览器都是正常的 如图:
正常情况:
IE6变形:
- HTML code
<div class="grid mainshare"> <div class="tabs_header"> <ul class="cls"> <li class="active"><a href="space.php?uid=5"><span>我的窝窝</span></a></li> <li><a href="space.php?uid=5&do=friend&view=me"><span>我的关注</span></a></li> <li><a href="space.php?uid=5&do=fans&view=me"><span>我的粉丝</span></a></li> <li><a href="space.php?uid=5&do=blog&view=trace"><span>我的喜欢</span></a></li> <li><a href="space.php?uid=5&do=discuz_posts&type=threads"><span>我的帖子</span></a></li> <li><a href="space.php?uid=5&do=thread&view=me"><span>我的话题</span></a></li> <li><a href="space.php?uid=5&do=album&view=me"><span>我的相册</span></a></li> <div class="clear"></div> </ul> </div> </div>
- CSS code
.mainshare { width: 970px; } .grid { display: inline; float: left; margin-left: 6px; margin-right: 6px; } .tabs_header { background-color: #EDF0EB; border-bottom: 2px solid #8FC43D; margin-bottom: 15px; overflow: hidden; } .cls:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .tabs_header ul { color: #588C0E; margin: 0 0 0 -2px; } .tabs_header li.active { background: none repeat scroll 0 0 #8FC43D; margin-bottom: 0; padding-bottom: 1px; } .tabs_header li { background: none repeat scroll 0 0 #CAE0B4; cursor: pointer; display: inline; float: left; height: 31px; line-height: 33px; margin: 0 1px 1px 2px; text-align: center; width: 100px; } .tabs_header li.active a { color: #FFFFFF; font-weight: 600; } .tabs_header li a { display: block; height: 31px; line-height: 33px; width: 100px; } .clear, .s_clear { clear: both; }
请问该怎么做才能兼容IE6呢?谢谢
------解决方案--------------------
.cls {
zoom:1 /*ie*/
}
.cls:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}