您的位置：首页 > 其它

IE6、7常见兼容性问题及解决方案

2015-03-13 11:23 197 查看

NO.1：li末子元素浮动后下外边距 - - IE6、7bug

测试代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin:0; padding:0;}
ul { list-style:none; background-color:#E8E82D; }
li { height:65px; background-color:#49B421;}
h3 { background-color:#9E2507;}
p { background-color:#2C818F;}
span {float:left; background-color:#640F66;}
</style>
</head>
<body>
<ul>
<li>
<h3>imooc</h3>
<p>首页</p>
<span>link</span>
</li>
......
</ul>
</body>
</html>


非兼容显示效果



解决方案

为 li 添加
vertical-align:top


兼容显示效果



N0.2：子元素相对定位bug - -IE6、7bug

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo3</title>
<style type="text/css">
#div1 { overflow:hidden; width:500px; height:500px; border:2px solid #DFCF0F; }
#div2 { position:relative; top:100px; left:100px; width:600px; height:200px; background-color:#FF0909; }
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>


非兼容显示效果



解决方案

为父元素添加相对定位，即：
position:relative;


兼容显示效果



1像素点线问题 - - IE6bug

测试代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo5</title>
<style type="text/css">
#div1 { float:left; margin-right:30px; width:200px; height:200px; border:1px dashed #E10000; }
#div2 { float:left; width:200px; height:200px; border:1px dotted #28841E; }
</style>
</head>
<body>
<div id="div1">他是虚线边框</div>
<div id="div2">他是点线边框</div>
</body>
</html>


非兼容显示效果



解决方案

方法1：不用1像素的点线，改用2像素点线，呵呵了吧；

方法2：必须用1px点线的话，想兼容ie6的话，那自己去切片吧……

兼容显示效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ie6 li 解决方案
相关文章推荐
新的分享
章节导航