44種IE css bug執行個體測試總結

web前端，我們可以把它理解成瀏覽器端。從這種意義上來講，開發人員日常工作跟瀏覽器關係是相對緊密的；

我們今天要探討的問題，就是關於瀏覽器中的另類（當然開發人員是這麼認為的）—IE 對CSS解釋和渲染上的一些bug，以及對這些bug的解決方案。

當然你會說，ie的CSS bug咱都給haslayout屬性來解決不就完了；您這就有點兒太低估ie的“能力”了；不否認在接下來的執行個體中，確實有的bug是haslayout屬性造成的，但不是全部。

以下的44個bug及解決方案執行個體是從一篇老外的博文上翻譯過來的（其實這部落格地址已經在我的收藏夾呆了快一年）了，之所以這次抽時間來翻譯它，也是因為最近項目中出現的N多問題，我發現都能從這裡找到；其實早前在豆丁網上看到有人翻譯過(只是對BUG list做了簡單的翻譯，而執行個體卻沒有)，我想自己親自來做一變執行個體測試，對自己還是有很大好處的，而且也想把這個拿出來分享。

注意:

1. 以下關於ie 的CSS bug在我註明的測試日之前是一直存在的(吼吼。。以後的事兒誰也不知道)；
2. 關於bug的解決方案在我註明測試日之前是有效。
3. 查看bug請點擊bug Name 相關連結，查看解決方案請點擊”GO”;

說明：如果您覺得看英文比較爽，請猛點這裡查看原文(http://haslayout.net/css/) 執行個體LIST>>

General Internet Explorer CSS Bugs

Bug Name	影響版本	解決方案	bug描述
>label標籤中有img標籤 無法focus到表單元素	IE8, IE7, IE6	Go	當img標籤包含在label標籤中，點擊img標籤時，無法觸發form元素選中事件
>button元素 不會自動置中	IE8	GoGo2	Button元素和input元素如：type=submit,type=button,type=reset and so on,當應用{display:block;margin-left:auto;margin :auto;}屬性時，是不起作用的。
>錯誤的浮動布局	IE7, IE6	Go	連續N個浮動元素且有clear屬性時，顯示出錯誤的排版（寬度沒有自適應）
>頁面滾動Bug	IE7, IE6	Go	非常怪異的溢出，看代碼
>連續浮動元素Bug	IE7, IE6	Go	在連續浮動元素中，最後一個與倒數第2個元素間會出現一段留白。
>連續浮動元素會重複出現最後一個元素的Bug	IE7, IE6	Go	在連續浮動元素中，最後一個元素是重複的。
>空標籤會有height值	IE7, IE6	Go	擁有layout屬性的空標籤會有height值
>表單元素雙margin值	IE7, IE6	Go	input textarea元素在水平方向的margin值會繼承父級元素的margin和“layout”
>邊框dotted屬性值等同dashed屬性值ie7	IE7	Go	當元素某邊應用{1px dotted}屬性且至少有一邊的寬度大於1px時，dotted會出現dashed效果
>relative屬性overflow失效	IE7, IE6	Go	當子項目設定position為relative的時候，父元素的overflow屬性值hidden與auto均失效
>IE7 “Broken” :hover Absolute Bug	IE7	Go	當子項目設定position為relative的時候，父元素的overflow屬性值hidden與auto均失效
>Button Background Shift On :active Bug	IE8	Go	:active時背景位移當在button input type=”submit”標籤應用:active狀態時 背景偏上及偏下
>Invisible Hover Border Bug	IE8	Go	hover時邊框隱藏元素設定了outline屬性，當:hover狀態時，bottom邊框會完全不顯示或少1px;
>Percentage Padding Margin Bug	IE8	Go	元素垂直方向設定margin值，且父元素設定了padding值為百分比以及父元素的父級設定了border或padding屬性是，產生的bug，且看執行個體：
>圖片浮動list標記bug	IE8	Go	當list有浮動圖片是list標記位置錯誤或根本不顯示
>TH標籤沒有繼承text-align屬性bug	IE8	Go	TH元素不會繼承來自其父元素的text-align的屬性值
>32個style限制	IE8, IE7, IE6	Go	頁面中style標籤大於等於32個時，第32個及之後的style都將被忽略（當然包括 @import這種形式外鏈的樣式表）
>hover狀態下白色背景忽略bug	IE7	Go	:hover時背景不會改變
>ie7下子選取器注釋bug	IE7	Go	在注釋後包含有子選取器的選取器會被忽視；
>使用*HTML bug	IE6	Go	* HTML選取器ie6是能識別的
>ie6忽略！important bug	IE6	Go	當我們在CSS規則後面加上!important 關鍵字時，ie6是不能識別的；
>PNG背景與背景顏色不匹配	IE8, IE7, IE6	Go	元素應用PNG背景圖片與背景顏色，且PNG圖片的顏色與背景顏色值相同，但ie表現bug
>margin值為auto無法置中 暫且叫偽bug	IE8, IE7, IE6	Go	給區塊層級元素設定margin值為auto時沒法置中
>:first-line !important規則無用	IE8	Go	當應用:first-line偽類，且有!important規則是，在ie8下是無法正常顯示的
>:first-letter忽視bug	IE6	Go	此bug是由一個有趣的原因引起；
>不完全的點擊bug	IE7, IE6	Go	a元素僅僅在有文字的地方才能點擊，且:hover效果也只有滑鼠移動到文字上才會出現
>浮動元素階梯狀bug	IE7, IE6	Go	浮動元素像樓梯狀排列在一起
>列表背景消失bug	IE6	Go	li,dt,dd元素背景不顯示
>noscript標籤背景與邊框bug	IE8, IE7, IE6	Go	noscript元素只有在瀏覽器禁用script時才會出現，但在ie瀏覽器卻非全是如此；
>透明地區無法點擊bug	IE8, IE7, IE6	Go	用PNG圖片做背景時，a標籤的透明地區無法點擊；
>list位置位移bug	IE8	Go	在ie8中，我們看到list與標記向下位移
>ol列表數沒有增加bug	IE7, IE6	Go	在ie6 7中我們無法看到ol列表數增加，而始終是1，不會發生變化
>ul與ol列表編號與符號隱藏bug	IE7, IE6	Go	在ie6 7中我們無法看到ol與ul列表數與表徵圖；
>無法讓圖片垂直置中	IE7, IE6	Go	給元素使用line-height方法無法讓內部圖片垂直置中顯示；
>背景圖片不顯示	IE8, IE7, IE6	Go	background 屬性應用時在ie中背景圖片不顯示
>自訂滑鼠bug	IE8, IE7, IE6	Go	自訂滑鼠在ie中不顯示
>背景溢出bug	IE6	Go	背景色會從一個元素溢出到與他下面相鄰的元素裡
>高度擴大Bug	IE6	GoGo	元素自身的高度大於對其定義的高度（此高度值很小）
>寬度度擴大Bug	IE6	Go	元素自身的高度大於對其定義的寬度(英文狀態下)
>雙邊距bug	IE6	Go	浮動元素產生雙倍的左右邊距
>負邊距bug	IE7, IE6	Go	當元素定義了負邊距時，超出父元素部分會被隱藏掉;
>斜體字浮動bug	IE6	Go	浮動元素字型為斜體時，與其相鄰的浮動元素會被擠下；
>3px間隙bug	IE6	Go	浮動元素相鄰的元素或者有3px的間隙，或者向下移動了位置
>Text-Align Bug	IE7, IE6	Go	text-align屬性影響區塊層級元素

原文地址：http://ued.iciba.com/?p=401&cpage=1