IE瀏覽器下常見的CSS相容問題

小火柴的藍色理想發表於2015-09-29

寬高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>

柯大俠整理的常見瀏覽器相容問題
2019-05-07
瀏覽器
WEB前端：瀏覽器（IE+Chrome+Firefox）常見相容問題處理【03】
2017-05-14
Web前端瀏覽器ChromeFirefox
CSS瀏覽器相容問題集
2011-12-20
CSS瀏覽器
IE 瀏覽器證書錯誤常見問題解答
2016-05-19
瀏覽器
windows系統下IE瀏覽器經常遇到的七大常見問題
2016-10-20
Windows瀏覽器
IE瀏覽器相容
2018-07-18
瀏覽器
談談CSS瀏覽器的相容問題。集錦
2012-05-30
CSS瀏覽器
CSS程式碼在不同瀏覽器相容問題
2021-09-09
CSS瀏覽器
瀏覽器相容性問題解決方案之CSS，已在IE、FF、Chrome測試
2013-12-30
瀏覽器CSSChrome
導航的瀏覽器相容問題
2019-05-11
瀏覽器
ie瀏覽器相容模式怎麼設定在哪裡 ie瀏覽器相容模式設定方法
2022-02-15
瀏覽器模式
parseInt()方法在IE8和IE8以下瀏覽器的相容性問題
2017-04-05
瀏覽器
針對IE9瀏覽器的CSS 相容性寫法
2017-02-22
IE9瀏覽器CSS
CSS瀏覽器相容彙總
2011-06-02
CSS瀏覽器
關於CSS3及瀏覽器相容性問題
2017-11-26
CSSS3瀏覽器
瀏覽器相容問題和webapp
2017-09-19
瀏覽器WebAPP
前端檔案下載相容方案（相容主流瀏覽器，包括IE與Safari）
2018-10-24
前端瀏覽器
（16）CSS 擴充：① 瀏覽器相容 | CSS
2020-03-09
CSS瀏覽器
相容各主瀏覽器透明的CSS
2017-10-04
瀏覽器CSS
用CSS hack技術解決瀏覽器相容性問題
2011-12-14
CSS瀏覽器
瀏覽器相容問題處理總結
2019-02-13
瀏覽器
用jquery解決瀏覽器相容問題
2013-01-22
jQuery瀏覽器
相容IE6瀏覽器的最大高度和最小高度css程式碼
2017-03-02
瀏覽器CSS
如何解決ie瀏覽器的快取問題
2017-03-31
瀏覽器快取
javascript相容低版本IE瀏覽器的事件物件
2017-04-08
JavaScript瀏覽器事件物件
CSS選擇器常見問題
2017-12-13
CSS
關於瀏覽器相容的一些問題
2017-06-21
瀏覽器
常見瀏覽器核心分享
2017-04-11
瀏覽器
阻止瀏覽器冒泡事件，相容firefox和ie
2017-06-30
瀏覽器事件Firefox
Bsie：讓 Bootsrap 相容 IE6-8 瀏覽器
2015-12-24
boot瀏覽器
關於UC瀏覽器相容scroll事件問題
2018-09-11
瀏覽器事件
scrollHeight、scrollTop、clientHeight瀏覽器相容問題
2017-04-05
client瀏覽器
Javascript和CSS瀏覽器相容總結
2011-07-26
JavaScriptCSS瀏覽器
相容IE8和IE7瀏覽器的圓形圖案
2017-04-10
瀏覽器
對 IE6 ~ IE8 老瀏覽器相容的 intern-geezer
2014-07-28
瀏覽器
絕對不能在低版本IE瀏覽器相容性問題上妥協
2014-01-06
瀏覽器
CSS常見問題
2019-02-17
CSS
css 常見問題
2017-09-15
CSS