11.兼容性問題（上）
新增加
問題一：在IE6下，內容會撐開設置好的寬高
簡介
1. 在IE6下，內容會撐開設置好的寬高。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> .box{width:400px;} .left{width:200px;height:200px;background:red;float:left;} .right{width:200px;float:right;} .div{width:180px;height:300px;background:green;padding:15px;} </style> </head> <body> <div class="box">
<div class="left"></div>
<div class="right"> <div class="div"></div> </div>
</div> </body> </html> |
效果
標準瀏覽器
IE6
總結
產生原因
1. 在IE6下，內容會撐開設置好的寬高。
2. "right"的子元素"div"實際寬度爲210px（180+15+15），而父元素"right"的寬爲200px，在標準瀏覽器下子元素"div"不會撐開父元素"right"，但在IE6下子元素寬度大於父元素寬度時，子元素是會撐開父元素的，所以在IE6下"div"會撐開"right"，出現兼容性。
解決辦法
1. 上策：計算一定要精確，不要讓內容的寬度超出我們設置的寬度。
2. 下策：爲父元素添加樣式屬性「overflow:hidden」
a) 原代碼：
i. .right{width:200px;float:right;}
b) 修改後：
i. .right{width:200px;float:right;overflow:hidden;}
問題二：在IE6下，內容會撐開設置好的寬高
簡介
1. 在IE6下，內容會撐開設置好的寬高。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> .box{width:400px;} .left{background:red;float:left;} .right{background:green;float:right;} h3{margin:0;height:30px;} </style> </head> <body> <div class="box">
<div class="left"> <h3>左側</h3> </div>
<div class="right"> <h3>右側</h3> </div>
</div> </body> </html> |
效果
標準瀏覽器
IE6,7
總結
產生原因
1. 在IE6,7下，浮動元素的寬度自己不指定需要內容撐開，而內容又是塊元素時，就會出現內容撐開整行。
解決辦法
1. 在IE6,7下元素浮動，如果寬度需要內容撐開，就給裏面的塊元素內容都加浮動。
a) 原代碼：h3{margin:0;height:30px;}
b) 修改後：h3{margin:0;height:30px;float:left;}
問題三：IE6,7下3像素的間隙bug
簡介
1. IE6,7下3像素的間隙bug 。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> .left{width:100px;height:200px;background:red;float:left;} .right{width:200px;height:200px;background:green;margin-left:100px;} </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html> |
效果
標準瀏覽器
IE6,7
總結
產生原因
1. 上面我們想「left」與「right」元素排在同一行，給「left」添加了浮動後，「right」就插上去了，然後我們給「right」元素添加了一個大小等於「left」元素寬度的左外邊距，這樣在標準瀏覽器下是OK的，但IE6,7下會出現3px的間隙bug。
解決辦法
1. 在IE6,7下元素要想通過浮動排在同一行，就要給這一行元素都加浮動。
問題四：標籤嵌套問題
簡介
1. 標籤嵌套問題，這是純結構問題。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> p{width:200px;height:200px;background:red;} </style> </head> <body> <p> <h3></h3> </p> </body> </html> |
效果
所有瀏覽器
總結
產生原因
1. p、dt、h標籤 裏面不能嵌套塊屬性標籤（如：「<p><div>塊</div></p>」 是不行的）
解決辦法
1. 沒什麼好說的，這是原則，要遵守原則書寫代碼即可。
2. 死守前面學過的標籤嵌套規範。
回顧增強
1、IE6下最小高度
問題
描述
1. 在IE6下，元素的高度小於19px時，會被當成19px來處理。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> .box{height:2px;background:red;} </style> </head> <body> <div class="box"></div> </body> </html> |
效果
標準瀏覽器
IE6
解決
思路
一、 上策：使用「overflow:hidden;」來處理。
二、 下策：使用「font-size:0;」來處理，但最大能處理到2px，2px以下處理不了。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> .box{height:2px;background:red;overflow:hidden;} </style> </head> <body> <div class="box"></div> </body> </html> |
效果
所有瀏覽器
2、IE 6下點線邊框
問題
描述
1. IE6下不支持邊框(border)的1px的點線(dotted)邊框，會顯示成虛線。
a) 除了1px以外都是支持的如:2px、100px 。
2. 顯示的基點不同
a) 谷歌瀏覽器基點是方形的。
b) IE瀏覽器和火狐瀏覽器下基點是圓點形的。
i. 雖然都是圓點但差距依然很大。
3. 四個拐角顯示上差異也很大
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> .box{width:200px;height:200px;border:20px dotted #000;} </style> </head> <body> <div class="box"></div> </body> </html> |
效果
IE
谷歌
火狐
……
解決
總
1. 解決辦法只有兩點
a) 儘量躲避它。
b) 切背景平鋪。
3、margin傳遞
問題
描述
1. 子元素的margin-top會傳遞給父元素，這是所有瀏覽器下都一樣的。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> body{margin:0;} .box{background:blue;} .div{width:200px;height:200px;background:red;margin:100px;} </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html> |
效果
所有瀏覽器
解決1
思路
1. 讓父元素浮動
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> body{margin:0;} .box{background:blue;float:left;} .div{width:200px;height:200px;background:red;margin:100px;} </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html> |
效果
所有瀏覽器
解決2（上）
思路
1. 使用「overflow:hidden;」。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> body{margin:0;} .box{background:blue;overflow:hidden;} .div{width:200px;height:200px;background:red;margin:100px;} </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html> |
效果
標準瀏覽器
IE6
解決2（下）
思路
1. 從「解決2(上)」中可以看到標準瀏覽器的margin-top傳遞已經解決，但IE6下還是沒有，其實IE6下的「haslayout」是可以解決這問題的，所以我們只需要使「haslayout」工作即可，可以使用「zoom:1」觸發它工作。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> body{margin:0;} .box{background:blue;overflow:hidden;zoom:1;} .div{width:200px;height:200px;background:red;margin:100px;} </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html> |
效果
所有瀏覽器
解決3（上）
思路
1. 當一個元素有邊框（border）時，它的子元素的margin-top也不會傳遞到它身上。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> body{margin:0;} .box{background:blue;border:1px solid #000;} .div{width:200px;height:200px;background:red;margin:100px;} </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html> |
效果
標準瀏覽器
IE6
解決3（下）
思路
1. 可以看到當父元素使用了邊框後，子元素的margin-top的確不傳遞給父元素了，但在IE6下又出現了另一個問題，就是margin徹底失效了。
2. 其實解決IE6下出現的marding失效的新問題很簡單，也是想辦法觸發「haslayout」工作。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> body{margin:0;} .box{background:blue;border:1px solid #000;zoom:1;} .div{width:200px;height:200px;background:red;margin:100px;} </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html> |
效果
所有瀏覽器
總結
1. IE6,7下60%以上的問題都是「haslayout」引起的，所以在編碼中，如果你要想很好的兼容IE6,7的話，儘量多考慮是否觸發「haslayout」工作。
4、a標籤僞類
問題
1. 在IE6,7下只支持a標籤的四個僞類。
解決
1. 單純的用CSS是解決不了的，可以使用js中的onmouseover等來解決。
2. 其實這些所有的關於IE6,7的兼容性問題可以不用再考慮了，它們已經基本上被市場淘汰了。
5、inline-block
問題
1. 在IE6,7下塊標籤是不支持「inline-block」的。
解決
1. 沒有解決辦法，只能避讓。
6、雙邊距（浮動）
問題
1. 在IE6下，塊元素有浮動和橫向的margin值，橫向的margin值會被放大兩倍。
2. 雙邊距bug只出現在IE6下，並且是塊元素和浮動以及橫向的外邊距同時存在下。
3. 雙邊距bug只出現在一行浮動元素中的第一個元素和最後一個元素，中間的浮動元素不會有雙邊距bug。
4. 雙邊距bug是跟margin值的方向有直接關係的
a) 對於「margin-left」一行左側第一個元素會有雙邊距bug。
b) 對於「margin-right」一行右側第一個元素會出現雙邊距bug。
解決
1. 直接用樣式「display:inline」轉成內嵌。
擴展
問題（浮動下的一個詭異問題）
1. 當一行子元素佔有的寬度之和與父級的寬度相差3px，或者有不滿行狀態的時候，最後一行的下margin在IE6下會失效。
解決
1. 沒有解決辦法。
7、li間隙（浮動）
問題
1. 在IE6,7下，li元素本身沒有浮動，但裏面的內容有浮動，li元素下邊就會產生一個間隙。
解決
1. 辦法1
a) 給li元素也添加浮動，但這樣li元素的寬度就由內容撐開了，有時就需要再爲li元素指定寬度了。並且這樣做的話，li元素的父元素可能還需要清浮動了。
2. 辦法2 （推薦）
a) 給li元素添加垂直對齊方式「vertical-align:top;」 。
擴展
問題
1. 當IE6下最小高度問題（li元素高度小於19px時）和li元素下間隙問題共存時，我們爲解決li元素間隙用「vertical-align:top;」，爲解決最小高度用「overflow:hidden;」，這兩個樣式屬性碰都一起會變成一個新的問題，這是我們不想的。
解決
1. 解決li元素間隙時不使用「vertical-align:top」，而用浮動。
8、IE6下的文字溢出bug （詭異）
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> body{margin:0;} .box{width:400px;} .left{float:left;} .right{width:400px;float:left;} /* 如果將這裏寬度改成397px就剛好沒有問題了 */ </style> </head> <body> <div class="box"> <div class="left"></div> <span></span> <!-- IE6下詭異問題之文字溢出bug --> <div class="right">↓len是一個大胖子</div> </div> </body> </html> |
效果
問題產生條件
1. 子元素的寬度和父元素的寬度相差小於3px。
2. 在兩個浮動元素之間有註釋或有內嵌元素。
a) 註釋或內嵌元素越多，溢出的文字就越多。
解決辦法
1. 辦法一：將父級寬度調大一點。
2. 辦法二：用div元素將內嵌元素和註釋包起來。
a) 原代碼：
| <div class="box"> <div class="left"></div> <span></span> <!-- IE6下詭異問題之文字溢出bug --> <div class="right">↓len是一個大胖子</div> </div> |
b) 修改後：
| <div class="box"> <div class="left"></div> <div> <span></span> <!-- IE6下詭異問題之文字溢出bug --> </div> <div class="right">↓len是一個大胖子</div> </div> |
9、 浮動與絕對
問題
描述
1. 當浮動元素與絕對定位元素是並列關係的時候，在IE6下絕對定位元素會消失。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> .box{width:200px;height:200px;border:1px solid #000; position:relative;} /* 定位父級 */ /* 絕對定位元素 */ span{width:50px;height:50px;background:yellow; position:absolute;top:0;right:-20px;} /* 浮動元素 */ ul{width:150px;height:150px;background:red; margin:0 0 0 50px;padding:0;float:left;display:inline;} </style> </head> <body> <div class="box"> <ul></ul> <span></span> </div> </body> </html> |
效果
標準瀏覽器
IE6
解決
思路
1. 出現問題的關鍵原因是並列，我們只需要讓浮動元素與絕對定位元素不併列即可。
a) 給定位元素外面包一個div。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> .box{width:200px;height:200px;border:1px solid #000; position:relative;} /* 定位父級 */ /* 絕對定位元素 */ span{width:50px;height:50px;background:yellow; position:absolute;top:0;right:-20px;} /* 浮動元素 */ ul{width:150px;height:150px;background:red; margin:0 0 0 50px;padding:0;float:left;display:inline;} </style> </head> <body> <div class="box"> <ul></ul> <div><span></span></div> </div> </body> </html> |
效果
標準瀏覽器
IE6
10、IE6,7下overflow包不住相對定位
問題
描述
1. 在IE6,7下，子元素有相對定位話，父級的overflow就包不住子元素了。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> .box{width:200px;height:200px;border:1px solid #000;overflow:auto;} .div{width:150px;height:300px;background:red;position:relative;} </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html> |
效果
標準瀏覽器
IE6,7
解決
思路
1. 出現此問題的根本原因是子元素添加了相對定位後提升了層級，而父元素中的overflow在IE6,7下卻不能提升層級造成的。知道這一點就好辦了，我們只需要再給父元素添加相對定位即可（雖然用了相對定位，但只要不指定偏移量的話，對元素就無任何副作用）。
代碼
1. 原代碼
a) .box{width:200px;height:200px;border:1px solid #000;overflow:auto;}
2. 修改後
a) .box{width:200px;height:200px;border:1px solid #000;overflow:auto;position:relative;}
效果
標準瀏覽器
IE6,7
11、IE6,7下絕對定位1px偏差
問題
描述
1. 在IE6下，絕對定位元素的父級元素寬高是奇數時，絕對元素的偏移量中right、bottom會有1px的偏差。
解決
1. 沒有解決辦法。
2. 建議儘量避開。
a) 如：不用奇數。
12、固定定位
問題
1. 在IE6下不支持。
解決
1. 可以用js來解決。
a) 在IE6下將它處理成絕對定位元素，獲取滾動條的top值，將滾動條拉動的距離不斷交給這個元素。
b) 其實我們有時不需要考慮IE6了，直接用固定定位即可，拋棄那萬惡的IE6，因爲市場佔有率已經漸漸爲0了。
13、透明度
問題
描述
1. IE6,7,8不支持「opacity」樣式屬性，但有自己的私有濾鏡「filter:alpha(opacity=xx)」 。
解決
描述
1. 多個一起使用
| filter:alpha(opacity=50); /*IE濾鏡，透明度50%*/ |
14、表格
注意
1. 儘量不要給table、th、td以外的表格標籤加樣式（原則）。
2. 不要給tbody、tr同時加背景樣式。
a) 如果給tbady和tr同時加了背景樣式，那麼在IE6下tbady的背景樣式會不起作用。
b) thead同理。
15、IE6,7表單間隙
問題
描述
1. 在IE6,7下，輸入類型的表單控件上下各有1px的間隙。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> div{ width:200px;height:32px;border:1px solid red;} input{ width:100px;height:30px;border:1px solid green;margin:0;padding:0;} </style> </head> <body> <div> <input type="text"/> </div> </body> </html> |
效果
標準瀏覽器
IE6,7
解決
思路
1. 加浮動讓元素脫離文檔流。
a) 給input加浮動。
代碼
原代碼
1. input{ width:100px;height:30px;border:1px solid green;margin:0;padding:0;}
修改後
1. input{ width:100px;height:30px;border:1px solid green;margin:0;padding:0;float:left;}
效果
標準瀏覽器
IE6,7
16、IE6,7下border:none無效
問題
描述
1. 在IE6,7下輸入類型的表單控件加「border:none」無效。
代碼
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>兼容性問題</title> <style> div{ width:200px;height:32px;border:1px solid red;background:yellow;} input{ width:100px;height:30px;border:none;margin:0;padding:0;float:left;} </style> </head> <body> <div> <input type="text"/> </div> </body> </html> |
效果
標準瀏覽器
IE6,7
解決
方法一
思路
1. 將「border:none」改成「border:0」 。
代碼
原代碼
1. input{ width:100px;height:30px;border:none;margin:0;padding:0;float:left;}
修改後
1. input{ width:100px;height:30px;border:0;margin:0;padding:0;float:left;}
方法二
思路
1. 添加一個背景樣式屬性即可使「border:none」在IE6,7下起作用。
代碼
原代碼
1. input{ width:100px;height:30px;border:none;margin:0;padding:0;float:left;}
修改後
1. input{ width:100px;height:30px;border:none;margin:0;padding:0;float:left;background:#FFF;}
同樣的效果
標準瀏覽器
IE6,7
17、IE6,7下表單輸入背景移動
問題
描述
1. 在IE6,7下，輸入類型的表單控件輸入文字的時候，背景會跟着一起移動。
解決
思路
1. 把背景加給父級
a) 前面講表單時講的很詳細，需要的話，可以看。
小結
上面介紹了這麼多兼容性問題，其實還有很多別的兼容性問題，但是大多都無法解決。比如說像「file」上傳樣式問題本身沒法設置，以及單選或者複選它的按鈕本身很醜，咱們想設置，但在原生的元素上也是沒法設置的，另外，lable這個元素不加for屬性在IE6下是沒有效果的，還有select下拉菜單在IE6下是沒法設置高度的，所以在工作中下拉菜單都是拿js模擬的，很少去用原生下拉菜單