伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。
這篇由伯樂線上前端開發小組的@szxw 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
受影響版本
該BUG影響：IE7、IE6
表現
<input>和<textarea>元素會從用擁有邊距（margin）屬性和佈局的父節點繼承水平方向的邊距（margin）屬性。
教程日期
2009-08-17 22:37:49 星期一
描述
這是我在Gérard Talbot 的 IE7 BUG 集合頁上發現的另外一個BUG。 雙邊距 Bug現在有了新的表現，而且在IE7下也出現了。現在它主要的表現是影響了<input>和<textarea>元素。讓我們來看一下示例。
示例
示例在一個單獨頁面上。
注意：雖然該演示顯示了合法的HTML標記，但它並不是建立HTML表單的合適方法，本演示只是一個簡化的版本。
HTML 程式碼：
|
1 2 3 4 5 6 7 |
<form action=""> <div> <input type="text" name="ber"><br> <textarea cols="10" rows="5" name="baz"></textarea><br> <select name="ber"><option>foo</option></select><br> </div> </form> |
CSS 程式碼:
|
1 2 3 4 |
div { margin-left: 100px; width: 100%; /* gives "layout" */ } |
現在，我們有一個擁有佈局並且設定了margin-left屬性的父節點。在IE6與IE7中，<input>和<textarea>元素的表現看起來就好像它們從父節點<div>那裡繼承了margin屬性一樣，這樣它們的margin屬性的值就是雙重疊加的。在父節點上設定margin-right屬性結果也是一樣的。在功能更健全的瀏覽器中，<input>和<textarea>元素在垂直方向上應該和<select>對齊。
解決方案
下面是按照解決方案型別排序的對上述問題的解決方案。
解決方案(條件註釋解決方案)
解決方案日期
2009-08-17 22:37:49 星期一
修復版本
所有受影響版本
描述
對於本BUG的修復是一個相當暴力直接的解決方案。讓我們一起看一下： 修復後的例項在一個單獨頁面上。
HTML 程式碼:
|
1 2 3 4 5 6 7 |
<form action=""> <div> <input type="text" name="ber"><br> <textarea cols="10" rows="5" name="baz"></textarea><br> <select name="ber"><option>foo</option></select><br> </div> </form> |
CSS 程式碼:
|
1 2 3 4 |
div { margin-left: 100px; width: 100%; /* gives "layout" */ } |
條件註釋程式碼：
|
1 2 3 4 5 6 7 8 |
<!--[if lte IE 7]> <style type="text/css"> input, textarea { margin-left: -100px; } </style> <![endif]--> |
讓我們來分解一下我在這裡的解決辦法。這個是迄今為止我發現的唯一一個解決方案。我通過使用條件註釋來針對IE6和IE7做了處理，您也可以選擇任何您喜歡的方式來達成這個目標。對於這些特定版本的IE瀏覽器，我為<input>和<textarea>設定了與父節點中的margin-left屬性值大小相等，符號相反的margin-left值。現在，在受該BUG影響瀏覽器中，所有的元素都像他們應該表現的那樣，與<select>元素在垂直方向對齊。該方案對於margin-right來說同樣適用。
註釋：你可以直接使用我在CSS裡定義的選擇條件，這不算惡意侵權。要確保修正其中margin的負數，把它只應用到和這個bug相關的表單元素中。