码迷，mamicode.com
首页 > Web开发 > 详细

IE浏览器下常见的CSS兼容问题

时间：2017-04-24 23:19:20      阅读：240      评论：0      收藏：0      [点我收藏+]

标签：option   oom   偏差   注释   list   float   set   gif   左右   

【1】IE6-浏览器下子元素能撑开父级设置好的宽高

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    height: 300px;
    width: 300px;
    background-color: #ccc;
    border: 10px solid black;
}
.in{
    height: 400px;
    width: 100px;
    background-color: red;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
</style>
</head>
<body>
<div class="box" id="box">
    <ul class="list" id="list">
        <li class="in" id="test">test</li>
    </ul>    
</div>
</body>    
</html>
技术分享

　

　　【2】IE6-浏览器下最小高度问题，设置(0-15px)高度小于等于15px的元素，在IE6下会被当作15px来处理
　　【解决】
　　　　[1]设置font-size为0，但最小高度为2px
　　　　[2]设置overflow:hidden，但最小高度为1px
　　　　[3]要想实现最小高度为0，只能是不设置高度

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
.box{
    height: 0px;
    background-color: #ccc;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>    
</html>
技术分享

 

边框bug

　　【1】IE6-浏览器下1px的点线边框，点线会变成虚线

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
.box{
    height: 300px;
    width: 300px;
    background-color: #ccc;
    border: 1px dotted black;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>    
</html>
技术分享

 

　　【2】标准下背景会延伸到边框区，而IE7-浏览器下背景只延伸到padding区

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
.box{
    height: 300px;
    width: 300px;
    background-color:#ccc;
    border: 10px dashed  red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>    
</html>
技术分享

 

　　【3】在IE10-浏览器下被<a>标签包含的<img>元素会产生边框

　　【解决】给图片设置{border: none}

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
img{
    height: 300px;
    width: 300px;
    background-color:#ccc;
}
</style>
</head>
<body>
<a href="#"><img src="#"></a>
</body>    
</html>
技术分享

 

盒模型bug

　　【1】IE7-浏览器下父级有边框，无法阻止子元素的上下margin值传递

　　【解决】触发父级的haslayout

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    border: 10px solid black;
    background-color: red;
}
.in{
    height: 100px;
    width: 100px;
    margin-top: 50px;
    background-color: blue;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"></li>
</ul>
</body>    
</html>
技术分享

 

　　【2】IE7-浏览器下不设置文档声明会导致怪异盒模型解析。在怪异盒模型下内容宽=width-2*padding-2*borderWidth

技术分享
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
.box{
    height: 100px;
    width: 100px;
    border: 40px solid black;
    background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>    
</html>
技术分享

 

　　【3】IE6-浏览器下使用margin负值，使元素移出父级，移出部分会被父级裁掉
　　【解决】给子级加相对定位relative

技术分享
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    margin-left: 100px;
    height: 300px;
    width: 300px;
    background-color: #ccc;
}
.in{
    margin-left: -30px;
    height: 100px;
    width: 100px;
    background-color: red;
}

</style>
</head>
<body>
<ul class="list">
    <li class="in"></li>
</ul>
</body>    
</html>
技术分享

 

LIbug

　　【1】(li的4px空隙bug)IE7-浏览器下，li本身没浮动，但内容有浮动，li下边会多出4px的空隙
　　【解决】
　　 　　[1]给li加浮动
　　　　 [2]设置vertical-align

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    width: 200px;
    background-color: lightgreen;
}
.in{
    height: 100px;
    background-color: lightblue;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in">
        <span style="float: left">1231</span>
    </li>
    <li class="in">
        <span style="float: left">1232</span>
    </li>
</ul>
</body>    
</html>
技术分享

 

　　【2】(li下的4px间隙和最小高度共存的问题)IE7浏览器下，当li下的4px间隙问题和最小高度问题共存的时候，设置垂直对齐方式无效
　　【解决】给li加浮动

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    width: 200px;
    background-color: lightgreen;
}
.in{
    height: 12px;
    background-color: lightblue;
    overflow: hidden;
    vertical-align: middle;
}
.span{
    float: left;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in">
        <span class="span">1231</span>
    </li>
    <li class="in">
        <span class="span">1232</span>
    </li>
</ul>
</body>    
</html>
技术分享

 

　　【3】(li的3px空隙bug)IE7-浏览器下li有高度或宽度或zoom:1，且仅包含内联元素，且内联元素被设置为display:block，li下会多出3px的垂直间距
　　【解决】触发li中子元素的haslayout

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    width: 200px;
    background-color: lightgreen;
}
.in{
    height: 100px;
    background-color: lightblue;
}
.span{
    display: block;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in">
        <span class="span">1231</span>
    </li>
    <li class="in">
        <span class="span">1232</span>
    </li>
</ul>
</body>    
</html>
技术分享

 

浮动bug

　　【1】(3pxbug)在IE6-浏览器下浮动元素和非浮动元素相邻时，会出现3px像素的空隙
　　【解决】
　　　　[1]使用CSShack，给浮动元素设置相反方向的-3px的margin值，将非浮动元素的相应方向的margin设为0(加IE6前缀)
　　　　[2]去掉非浮动元素的margin值，加浮动。

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
.box{
    width: 100px;
    height: 100px;
}
#box1{
    float: left;
    background-color: red;    
    _margin-right:-3px;
    border-right: 1px solid green;
}
#box2{
    margin-left: 100px;
    _margin-left: 0;
    border:1px solid black;
    background-color: blue;        
}
</style>
</head>
<body>
<div class="box" id="box1"></div><div class="box" id="box2"></div>
</body>    
</html>
技术分享

 

　　【2】IE6-下父元素浮动后，且子元素设置了高度，如果父元素不设置宽度，宽度会撑满整行
　　【解决】
　　　　[1]给浮动的父元素设置宽度
　　　　[2]给子元素设置宽度
　　　　[3]给子元素设置浮动

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    float: left;
    background-color: green;
}
.in{
    height: 100px;
    background-color: yellow;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in">我是内容</li>
</ul>
</body>    
</html>
技术分享

 

　　【3】(浮动折行)在IE7-浏览器下，如果两个元素一个右浮动，一个不浮动。浮动元素会折到下一行
　　【解决】
　　　　[1]给不浮动的元素也加浮动
　　　　[2]在HTML中先放右浮动的元素

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    width: 500px;
    background-color: lightgreen;
    overflow: hidden;
}
.in{
    width: 100px;
    height: 100px;
}
.in1{
    background-color: lightyellow;
}
.in2{
    background-color: lightblue;
    float: right;
}

</style>
</head>
<body>
<div class="list">
    <span class="in in1">我是不浮动</span>
    <span class="in in2">我是右浮动</span>
</div>
</body>    
</html>
技术分享

 

　　【4】(双边距bug)IE6-浏览器下块元素有浮动，且有横向的margin值。若仅有左margin，最左边的浮动的块元素的左margin会放大成两倍。若仅有右margin，最右边的浮动的块元素的右margin会放大成两倍。若左右都有，最左边的左margin和最右边的右margin会放大成两倍。
　　【解决】给块元素设置display:inline

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    float: left;
    background-color: #ccc;
}
.in{
    float:left;
    width: 100px;
    height: 100px;
}
.in1{
    background-color: lightgreen;
    margin-left: 50px;
}
.in2{
    background-color: lightyellow;
}
.in3{
    background-color: lightblue;
    margin-right: 50px;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in in1"></li>
    <li class="in in2"></li>
    <li class="in in3"></li>
</ul>
</body>    
</html>
技术分享

 

　　【5】(margin-bottomBUG)在IE7-浏览器下父级宽度和每行元素的宽度之和相差超过3px时，或者有不满行的情况，最后一行的margin-bottom失效
　　【解决】尽量不要用margin-bottom，而用margin-top代替

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    width: 350px;
    overflow: hidden;
    background-color: #ccc;
}
.in{
    float:left;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    margin-right: 10px;
    background-color: lightgreen;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"></li>
    <li class="in"></li>
    <li class="in"></li>
    <li class="in"></li>
    <li class="in"></li>
</ul>
</body>    
</html>
技术分享

 

　　【6】(文字溢出bug)IE6-浏览器下两个浮动元素(浮动元素不能是li)一个左浮无宽度，另一个右浮动宽度与父级宽度相差不超过3px，浮动元素中间有注释或者内联元素，文字就被复制 
　　【解决】
　　　　[1]将注释去掉
　　　　[2]将内联元素变成块元素
　　　　[3]内联元素及注释整个用<div>包起来

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    width: 200px;
}
.in1{
    float:left;
}
.in2{
    float:right;
    width:198px;
}
</style>
</head>
<body>
<div class="list">
    <div class="in1"></div>
    <!-- 我是--><span></span><!-- 我是 --><!-- 我是 -->
    <div class="in2">多出来的一头猪吗</div>
</div>
</body>    
</html>
技术分享

 

定位bug

　　【1】在IE7-浏览器下子元素有相对定位，父级的overflow无效 
　　【解决】给父级也设置相对定位

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    background-color: lightgreen;
    width: 200px;
    height: 100px;
    overflow: auto;
}
.in{
    position: relative;
    width: 100px;
    height: 300px;
    background-color: lightblue;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"></li>
</ul>
</body>    
</html>
技术分享

 

　　【2】在IE6-浏览器下浮动元素和绝对定位元素是并列关系，且浮动元素设置margin-left和width的和正好等于父元素的宽度，这时绝对定位元素会消失
　　【解决】给定位元素外面包一个div

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    background-color: lightgreen;
    width: 200px;
    height: 100px;
}

.in1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
.in2{
    float: left;
    margin-left: 100px;
    display: inline;
    width: 100px;
    height: 100px;
    background-color: pink;    
}
</style>
</head>
<body>
<ul class="list">
    <li class="in1">定位元素</li>
    <li class="in2">浮动元素</li>
</ul>
</body>    
</html>
技术分享

 

　　【3】在IE6-浏览器下绝对定位元素的父级元素的宽度为奇数时，元素的right会有1px的偏差；高度为奇数时，元素的bottom会有1px的偏差

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    position: relative;
    background-color: black;
    width: 199px;
    height: 199px;
}

.in{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in">定位元素</li>
</ul>
</body>    
</html>
技术分享

 

表单bug

　　【1】IE6-浏览器下label标签只支持for属性，不支持仅仅包含<input>的写法
　　【解决】使用for属性

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label><input type="checkbox">label测试文字</label>
</body>    
</html>
技术分享

 

　　【2】(input空隙问题)当input元素被div包围时，IE6-浏览器下它们之间上下会各多出1px的空隙；而IE7、8浏览器下它们之间的上边会多出1px的空隙
　　【解决】给input加浮动

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
input{
    margin: 0;
    padding: 0;
    border: none;
}
.box{
    width: 202px;
    height: 32px;
    border: 1px solid black;
    background-color: red;
}
.ipt{
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
    <input class="ipt">
</div>
</body>    
</html>
技术分享

 

　　【3】IE6-浏览器下当input元素被div包围时，在已经给input设置浮动的情况下，设置border:none无法得到理想效果
　　【解决】
　　　　[1]设置border:0
　　　　[2]重置input的背景

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
input{
    margin: 0;
    padding: 0;
    border: none;
}
.box{
    width: 201px;
    height: 31px;
    border: 1px solid black;
    background-color: red;
}
.ipt{
    width: 200px;
    height: 30px;
    border: none;
    float: left;
}
</style>
</head>
<body>
<div class="box">
    <input class="ipt">
</div>
</body>    
</html>
技术分享

 

　　【4】IE7-浏览器下输入类型表单控件如<textarea>、<input>等输入文字时，背景图像会跟着文字一起滚动
　　【解决】把背景加给父级，并清掉自身背景

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
.test{
    overflow: auto;
    background: url(img/bg.jpg) no-repeat;
    font-size: 50px;
    line-height: 60px;
    height: 200px;
    width: 500px;
}
</style>
</head>
<body>
<textarea class="test"></textarea>
</body>    
</html>
技术分享

 

　　【5】IE6-浏览器中select控件无法被<div>覆盖，因为在IE6中select控件是处于最顶层的。
　　【解决】iframe比select优先级高，把iframe嵌套在<div>里面，并设置为不可见

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{
    width: 100px;
    height: 100px;
    background-color: lightgreen;
}
.box{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: pink;
}
</style>
</head>
<body>
<select class="select">
    <option>test1</option>
    <option>test2</option>
    <option>test3</option>
</select>
<div class="box" id="box"><iframe style="width:50px; height:50px;border: 0; position: absolute; opacity = 0; filter:alpha(opacity=0)"></iframe></div>
</body>    
</html>

IE浏览器下常见的CSS兼容问题

标签：option   oom   偏差   注释   list   float   set   gif   左右   

原文地址：http://www.cnblogs.com/tangshiguang/p/6759138.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！