IE兼容性问题

一、浮动时子元素撑开父元素高度——padding

标准浏览器：子元素不会撑开父元素设置好的宽度高度

IE6浏览器：子元素会撑开父元素设置好的宽度高度，导致页面错位

实例：

（1）标准（2）IE6

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:400px;}
.left{ width:200px;height:300px;background:red;float:left;}
.right{ width:200px;float:right;}
.div{width:180px;height:180px;background:blue;padding:15px;}
</style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="right">
        <div class="div"></div>
    </div>
</div>
</body>
</html>

二、浮动下的内容撑开

标准浏览器：内容里的块元素不加浮动也可以内容撑开

IE6、7浏览器：块元素默认撑开整行，在元素浮动下，如果宽度需要根据内容撑开，就给里边的块元素都加浮动

实例：

（1）标准（2）IE67

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:400px;}
.left{background:red;float:left;}
.right{float:right; background:blue;}
h3{margin:0;height:30px; float:left;}  //保证IE67兼容需要加的float:left;

 </style> </head> <body> <div class="box"> <div class="left"> <h3>左侧</h3> </div> <div class="right"> <h3>右侧</h3> </div> </div> </body> </html>

三、块元素同一行显示

标准写法：要在同一行的元素都加浮动，否则IE67会有三像素误差

四、IE6下最小高度问题

IE6：元素的高度的小于19px的时候，会被当做19px来处理

解决办法:overflow:hidden;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{height:2px;background:red;overflow:hidden;}   //overflow:hidden;

 </style> </head> <body> <div class="box"></div> </body> </html>

五、点线边框

IE6：1px dotted 在IE6下不支持

解决办法:切背景平铺

.box{ width:100px;height:100px;border:1px dotted #000;}  //IE6下不支持

六、margin传递

描述：子元素margin会传递给父元素

解决办法：

（1）标准IE都没问题

body{margin:0;}
.box{background:blue;float:left;}    //float:left
.div{width:200px;height:200px;background:red;margin:100px;}

（2）在IE6下解决margin传递要触发haslayout

body{margin:0;}
.box{background:blue;overflow:hidden;zoom:1;}  //加了overflow标准没问题IE无效果，IE下需要加zoom触发haslayout
.div{width:200px;height:200px;background:red;margin:100px;}

（3）在IE6下父级有边框的时候，子元素的margin值消失。解决办法:触发父级的haslayout

body{margin:0;}
.box{background:blue;border:1px solid #000;zoom:1;}  //加zoom触发haslayout
.div{width:200px;height:200px;background:red;margin:100px;}

<div class="box">
    <div class="div"></div>
</div>

七、IE6下块元素双边距BUG

描述：在IE6，块元素有浮动和和横向的margin值，横向的margin值会被放大成两倍

出现双边距的情况：（1）margin-right 一行右侧第一个元素有双边距（2）margin-left 一行左侧第一个元素有双边距

解决办法: display:inline;

八、在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙

解决办法:

（1）给li加浮动

ul{margin:0;padding:0;width:302px;}
li{ list-style:none;height:30px;border:1px solid #000;float:left;width:300px;}  //加float、width
a{width:100px;float:left;height:30px;background:Red;}
span{width:100px;float:right;height:30px;background:blue;}

（2）给li加vertical-align

ul{margin:0;padding:0;width:302px;}
li{ list-style:none;height:30px;border:1px solid #000; vertical-align:top;}  //加了vertical-align
a{width:100px;float:left;height:30px;background:Red;}
span{width:100px;float:right;height:30px;background:blue;}

（3）当IE6下最小高度问题，和 li的间隙问题共存的时候给li加浮动

ul{margin:0;padding:0;width:302px;}
li{ list-style:none;height:12px;border:1px solid #000;overflow:hidden; float:left;width:300px;}  //去掉vertical-align
a{width:100px;float:left;height:12px;background:Red;}
span{width:100px;float:right;height:12px;background:blue;}

<ul>
    <li>
        <a href="#"></a>
        <span></span>
    </li>
    <li>
        <a href="#"></a>
        <span></span>
    </li>
    <li>
        <a href="#"></a>
        <span></span>
    </li>
</ul>

九、IE6的margin下失效

描述：当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效

十、在IE6下的文字溢出BUG

描述：（1）子元素的宽度和父级的宽度相差小于3px的时候（2）两个浮动元素中间有注释/内嵌元素的时候会产生文字溢出

解决办法：用div把注释或者内嵌元素用div包起来

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:400px;}
.left{float:left;}
.right{width:400px;float:right;}
</style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div><!-- IE6下的文字溢出BUG --><span></span></div>  //解决办法在这一行
    <div class="right">&darr;leo是个大胖子</div>
</div>
</body>
</html>

十一、当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失

解决办法:给定位元素外面包个div

有问题没问题

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px;height:200px;border:1px solid #000; position:relative;}
span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}
ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}
</style>
</head>
<body>
<div class="box">
    <ul></ul>
    <div><span></span></div>
</div>
</body>
</html>

十二、在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素

解决办法: 给父级也加相对定位

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px;height:200px;border:1px solid #000; overflow:auto; position:relative;}
.div{ width:150px;height:300px;background:yellow; position:relative;}
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
</div>
</body>
</html>

十三、在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会

解决办法：没办法

十四、IE6下不支持绝对定位

解决办法：JS

十五、在IE6，7下输入类型的表单控件上下各有1px的间隙

解决办法:给input加浮动

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px;height:32px;border:1px solid red;}
input{width:100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}
</style>
</head>
<body>
<div class="box">
    <input type="text" />
</div>
</body>
</html>

十六、在IE6，7下输入类型的表单控件加border:none;无效

解决办法: 给input加背景

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:200px;height:32px;border:1px solid red;background:yellow;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:#fff;}
</style>
</head>
<body>
<div class="box">
    <input type="text" />
</div>
</body>
</html>

十七、在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动

解决办法: 把背景加给父级

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}
</style>
</head>
<body>
<div class="box">
    <input type="text" />
</div>
</body>
</html>

十八、IE6下png图片背景不透明

解决办法：

（1）调用JS文件（推荐）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{ background:#000;}
.box{width:400px;height:400px;background:url(img/png.png);}
</style>
<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('.box');   //调用方法，括号里写背景图片的class
</script>
<![endif]-->
</head>
<body>
<div class="box"></div>
</body>
</html>

（2）css自带的png滤镜（不推荐）

缺点：没法设置位置，没法平铺

写法：_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="图片地址", sizingMethod="crop");

body{ background:#000;}
.box{width:400px;height:400px; background:url(img/png.png);_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/png.png", sizingMethod="crop");  
}

十九、important兼容性

在IE6：在important 后边在家一条同样的样式，会破坏掉important的作用，会按照默认的优先级顺序来走

二十、margin负值IE6隐藏

解决办法：加上position:relative

有问题正常

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{float:left;border:10px solid #000;margin:20px; display:inline;}
.box div{width:100px;height:100px;background:red; position:relative;}  //主要是position:relative
.div1{margin-top:-30px;}
.div2{margin-left:-30px;}
.div3{margin-bottom:-30px;}
.div4{margin-right:-30px;}
</style>
</head>
<body>
<div class="box">
    <div class="div1"></div>
</div>
<div class="box">
    <div class="div2"></div>
</div>
<div class="box">
    <div class="div3"></div>
</div>
<div class="box">
    <div class="div4"></div>
</div>
</body>
</html>

二十一、IE7及以下表格不写内容没有分割线

其他浏览器：操作栏目没有写内容有表格线

IE7及以下：操作栏目没有写内容没有表格线，如图

解决办法：加上空白内容，例如："&nbsp"

posted @ 2017-03-31 18:12 念念念不忘阅读(302) 评论(0) 收藏举报

刷新页面返回顶部

念念念不忘

IE兼容性问题

公告