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>