Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > IE浏览器下常见的CSS兼容问题_html/css_WEB-ITnose

IE浏览器下常见的CSS兼容问题_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:36:05
Original
1616 people have browsed it

 

宽高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>
Copy after login

　

　　【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>
Copy after login

边框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>
Copy after login

　　【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>
Copy after login

　　【3】在IE10-浏览器下被标签包含的IE浏览器下常见的CSS兼容问题_html/css_WEB-ITnose元素会产生边框

　　【解决】给图片设置{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="#" alt="IE浏览器下常见的CSS兼容问题_html/css_WEB-ITnose" ></a></body>    </html>
Copy after login

盒模型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>
Copy after login

　　【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>
Copy after login

　　【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>
Copy after login

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="max-width:90%">1231</span>    </li>    <li class="in">        <span style="float: left">1232</span>    </li></ul></body>    </html>
Copy after login

　　【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>
Copy after login

　　【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>
Copy after login

浮动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>
Copy after login

　　【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>
Copy after login

　　【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>
Copy after login

　　【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>
Copy after login

　　【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>
Copy after login

　　【6】(文字溢出bug)IE6-浏览器下两个浮动元素(浮动元素不能是li)一个左浮无宽度，另一个右浮动宽度与父级宽度相差不超过3px，浮动元素中间有注释或者内联元素，文字就被复制
　　【解决】
　　　　[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{    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>
Copy after login

定位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>
Copy after login

　　【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>
Copy after login

　　【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>
Copy after login

表单bug

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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><label><input type="checkbox">label测试文字</label></body>    </html>
Copy after login

　　【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>
Copy after login

　　【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>
Copy after login

　　【4】IE7-浏览器下输入类型表单控件如