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

宽高bug

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

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值