帮忙看下IE6的一个不兼容的问题

xiaopai20 2012-05-16 11:14:17

这段代码在IE6 就变形了
其他浏览器都是正常的如图：
正常情况：

IE6变形：



<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>



.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呢？谢谢

...全文

113 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

jellday 2012-05-16

打赏
举报

<div class="clear"></div>
把这个挪到</ul>后面试试
你清除浮动太早了

001007009 2012-05-16

打赏
举报

.cls {
zoom:1 /*ie*/
}
.cls:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

001007009 2012-05-16

打赏
举报



<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" />		

		<style>

.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 {

	zoom:1

}

.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;

}







		</style>		

	</head>

	<body>

<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>



	</body>

</html>

chenjwjw 2012-05-16

打赏
举报

找到原因了，IE6你加多一个样式吧
.tabs_header {
background-color: #EDF0EB;
border-bottom: 2px solid #8FC43D;
margin-bottom: 15px;
overflow: hidden;
_float:left;/*这样就解决了*/
}

chenjwjw 2012-05-16

打赏
举报

把ul也加上左浮动样式！因为ul也是一个包容li的容器，如果只把li进行了浮动，那ul的高度就会缩的尽可能小，此时如果将ul也进了浮动，可以使ul与浮动的li处在同一层，这时线应该就不会上去了！你试试吧！

i贾小林 2012-05-16

打赏
举报

[Quote=引用 1 楼的回复:]

HTML code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" ……
[/Quote]正解。。。。。。

本来是很简单的一个功能，可是一开始弄的时候，还有IE能实现，FF总是不能实现，在网上看了半天，也没弄出个所以然，所以在同事的帮忙下，总算弄出来了，浏览器的兼容性考的还是细节上面的东西，所有关于细节的，我会用注释标出来的。