ie6/7下的一些常见兼容问题解决

/ 0评 / 0

复制code间的代码到本地直接运行查看。

 

/************************************ code ****************************************/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie bug 解决方案</title>

<style type="text/css">
body,div,h1,h2,h3,h4,h5,h6{ font-size: 14px; font-weight: normal; }
body { background: url(http://jietuya.com/pics/allimg/110426/5-110426210211.jpg) 0 -20px repeat;}
*{ margin: 0; padding: 0; }
a {  text-decoration: none; }
ul,li { list-style: none; color: #000; }

#wrap { width: 600px; margin: 0 auto; }
.contain { margin: 20px;  color: #fff;}
.contain h1 { color:#F00;  }
.contain p { width: 500px; margin-top: 10px; color: #fff; line-height: 20px; }
.list1 { margin-top: 10px; width: 200px; }
.list1 li { width: 100%;}
.list1 li span { }
.list1 li.a { background: #ccc; }
.list1 li.b { background: #ff0; }

/* li-position */
.all { width: 340px; height: 120px; margin-top: 30px;  overflow: auto; }
.zone { width: 300px; padding: 10px; color: #666; background: #eee;}
.zone  a { color: #219A44; text-decoration: none; }
.zone  a:hover { text-decoration: underline;  }
.zone li { height: 24px; line-height: 24px; position: relative; }
.zone li span.p { position: absolute; top: 0; right: 0; }

/* ad */
.ad { margin: 20px; width: 400px; height: 40px; line-height: 40px; text-align: center; border: 1px dashed #eee; color: #fff; }
.ad a { color: #fff; background: #219a44; padding: 2px 10px;}
.ad a:hover { background: #22A1D0; }

</style>
</head>

<body>

<div id="wrap">
<div class="contain">
    <h1>li子元素浮动,但外层不浮动,在ie6/7下li多出3px的间隙问题</h1>
    <ul class="list1">
        <li class="a">第一行第一行第一行第一行<span>span1</span></li>
        <li class="b">第二行第二行第二行第二行<span>span2</span></li>
    </ul>
    
    <p>
        当li中包含子元素时,li则在ie6/7下产生3px的bug<br/>
        网上说产生这个bug的条件是“经过测试发现:li的子元素浮动只是这个bug产生的必要条件,这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一:width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。”
        <br/>
        但我发现在li中包含子元素时且给li定义了一个weight时,这个bug就被触发了。不需要li的子元素span浮动。<br/>
        解决方案<br/>
        1、给li 加上float: left;li可以设置width、height、zoom。<br/>
        2、li的span设置clear:left|both,这时li不能设置width、height、zoom。<br/>
           li设置clear:left|both,这时 li不能设置width、height、zoom。   <br/>
        3、特别感谢 meimei 的指教,IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。太怪异了,只要加上vertical-align的值是三者之一即可。
    </p>
    
    
<br/>

<h1>li元素使用position:relative后,外层div的overflow:auto在ie6、7下无效(即滚动条不会出现)</h1>
<div class="all">
    <ul class="zone">
        <li><a href="http://www.jietuya.com" target="_blank">截图呀 电影 动漫 电视 MTV 评论</a><span class="p">截图呀</span></li>
         <li><a href="http://www.jietuya.com" target="_blank">截图呀 电影 动漫 电视 MTV 评论</a><span class="p">截图呀</span></li>
         <li><a href="http://www.jietuya.com" target="_blank">截图呀 电影 动漫 电视 MTV 评论</a><span class="p">截图呀</span></li>
         <li><a href="http://www.jietuya.com" target="_blank">截图呀 电影 动漫 电视 MTV 评论</a><span class="p">截图呀</span></li>
          <li><a href="http://www.jietuya.com" target="_blank">截图呀 电影 动漫 电视 MTV 评论</a><span class="p">截图呀</span></li>
         <li><a href="http://www.jietuya.com" target="_blank">截图呀 电影 动漫 电视 MTV 评论</a><span class="p">截图呀</span></li>
    </ul>
</div>   
<p>
解决方案:<br/>
1、外层div加上 position:relative; <br/>
2、去掉li上的position:relative; <br/>
</p>

<br/>

待续>>>

</div>

<div class="ad">
小广告
    <a href="http://www.jietuya.com" target="_blank">截图呀 http://www.jietuya.com</a>
</div>

</div>

</body>
</html>

 /************************************ code end **********************************/

 

参考文档:http://jnerish.blog.163.com/blog/static/8805768820103214842564/

发表评论

您的电子邮箱地址不会被公开。

*