CSS常見相容性問題及解決辦法彙總
我們都知道，不同版本瀏覽器對css的解析是有些分別的，特別是IE6，和IE7.雖然現在使用老版本的人數不多，但是還是有部分人在使用，我們並不能完全忽略這群使用者。如下所示：我們還是應該瞭解一下這些瀏覽器相容問題。
問題一：在IE6元素浮動，如果寬度需要內容撐開，就給裡邊的塊元素都加浮動（不然會出不在同一行）
問題二：在IE6，7下元素要通過浮動並在同一行，就給這行元素都加浮動；
問題三：注意標籤巢狀規範（<p><h3></h3></p>給p標籤加背景顏色會出現兩塊bug）
問題四：在IE6下元素的高度的小於19px的時候，會被當做19px來處理（解決辦法:overflow:hidden;）
問題五：1px dotted 在IE6下不支援（解決辦法:切背景平鋪）
問題六：在IE6下父級有邊框的時候，子元素的margin值消失（解決辦法:觸發父級的haslayout）
問題七：IE6下雙邊距BUG，在IE6，塊元素有浮動和和橫向的margin值 ，橫向的margin值會被放大成兩倍（解決辦法: display:inline;）margin-right 一行右側第一個元素有雙邊距；margin-left 一行左側第一個元素有雙邊距
問題八： 在IE6，7下，li本身沒浮動，但是li的內容有浮動，li下邊就會產生一個間隙（解決辦法:1.給li加浮動2.給li加vertical-align
當IE6下最小高度問題，和 li的間隙問題共存的時候 給li加浮動
問題九： 當一行子元素佔有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態的時候,最後一行子元素的下margin在IE6下就會失效（暫時無解決辦法）
問題十： 在IE6下的文字溢位BUG，產生條件：子元素的寬度和父級的寬度相差小於3px的時候,兩個浮動元素中間有註釋或者內嵌元素（解決辦法:用div把註釋或者內嵌元素用div包起來 （父級調大））
問題十一：當浮動元素和絕對定位元素是並列關係的時候，在IE6下絕對定位元素會消失（解決辦法:給定位元素外面包個div）
問題十二：在IE6，7下，子元素有相對定位的話，父級的overflow包不住子元素（解決辦法: 給父級也加相對定位
問題十三：在IE6下絕對定位元素的父級寬高是奇數的時候，元素的right值和bottom值會有1px的偏差（沒有解決方法）
問題十四：在IE6下position:fixed;無法實現功能（使用js方法代替）
問題十五：在IE6，7下輸入型別的表單控制元件上下各有1px的間隙（解決辦法:給input加浮動）
問題十六：在IE6，7下輸入型別的表單控制元件加border:none;（解決辦法: 重置input的背景，或者設定border：0；）
問題十七：在IE6，7下輸入型別的表單控制元件輸入文字的時候，背景圖片會跟著一塊移動（解決辦法: 把背景加給父級）
上面就是對不同問題的解決辦法，當我們對不同瀏覽器設定不同的風格:
-
<!–[if IE]>
-
這是IE
-
<![endif]–>
-
<!–[if IE 11]>
-
11
-
<![endif]–>
或者使用 css hack：
\9 IE10之前的IE瀏覽器解析
+,* IE7包括IE7之前的IE瀏覽器解析
_IE6包括IE6之前的IE瀏覽器
.box{ background:Red;background:blue\9; +background:yellow;_background:green;}
我們都知道，不同版本瀏覽器對css的解析是有些分別的，特別是IE6，和IE7.雖然現在使用老版本的人數不多，但是還是有部分人在使用，我們並不能完全忽略這群使用者。如下所示：我們還是應該瞭解一下這些瀏覽器相容問題。
問題一：在IE6元素浮動，如果寬度需要內容撐開，就給裡邊的塊元素都加浮動（不然會出不在同一行）
問題二：在IE6，7下元素要通過浮動並在同一行，就給這行元素都加浮動；
問題三：注意標籤巢狀規範（<p><h3></h3></p>給p標籤加背景顏色會出現兩塊bug）
問題四：在IE6下元素的高度的小於19px的時候，會被當做19px來處理（解決辦法:overflow:hidden;）
問題五：1px dotted 在IE6下不支援（解決辦法:切背景平鋪）
問題六：在IE6下父級有邊框的時候，子元素的margin值消失（解決辦法:觸發父級的haslayout）
問題七：IE6下雙邊距BUG，在IE6，塊元素有浮動和和橫向的margin值 ，橫向的margin值會被放大成兩倍（解決辦法: display:inline;）margin-right 一行右側第一個元素有雙邊距；margin-left 一行左側第一個元素有雙邊距
問題八： 在IE6，7下，li本身沒浮動，但是li的內容有浮動，li下邊就會產生一個間隙（解決辦法:1.給li加浮動2.給li加vertical-align）
當IE6下最小高度問題，和 li的間隙問題共存的時候 給li加浮動
問題九： 當一行子元素佔有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態的時候,最後一行子元素的下margin在IE6下就會失效（暫時無解決辦法）
問題十： 在IE6下的文字溢位BUG，產生條件：子元素的寬度和父級的寬度相差小於3px的時候,兩個浮動元素中間有註釋或者內嵌元素（解決辦法:用div把註釋或者內嵌元素用div包起來 （父級調大））
問題十一：當浮動元素和絕對定位元素是並列關係的時候，在IE6下絕對定位元素會消失（解決辦法:給定位元素外面包個div）
問題十二：在IE6，7下，子元素有相對定位的話，父級的overflow包不住子元素（解決辦法: 給父級也加相對定位）
問題十三：在IE6下絕對定位元素的父級寬高是奇數的時候，元素的right值和bottom值會有1px的偏差（沒有解決方法）
問題十四：在IE6下position:fixed;無法實現功能（使用js方法代替）
問題十五：在IE6，7下輸入型別的表單控制元件上下各有1px的間隙（解決辦法:給input加浮動）
問題十六：在IE6，7下輸入型別的表單控制元件加border:none;（解決辦法: 重置input的背景，或者設定border：0；）
問題十七：在IE6，7下輸入型別的表單控制元件輸入文字的時候，背景圖片會跟著一塊移動（解決辦法: 把背景加給父級）
上面就是對不同問題的解決辦法，當我們對不同瀏覽器設定不同的風格:
-
<!–[if IE]>
-
這是IE
-
<![endif]–>
-
<!–[if IE 11]>
-
11
-
<![endif]–>
或者使用 css hack：
\9 IE10之前的IE瀏覽器解析
+,* IE7包括IE7之前的IE瀏覽器解析
_IE6包括IE6之前的IE瀏覽器
.box{ background:Red;background:blue\9; +background:yellow;_background:green;}