受影響版本

該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 代碼：

<form action=""> 
<div> 
    <input type="text" name="ber"> 
    <textarea cols="10" rows="5" name="baz"></textarea> 
    <select name="ber"><option>foo</option></select> 
</div> 
</form> 

CSS 代碼：

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 代碼:

<form action=""> 
<div> 
    <input type="text" name="ber"> 
    <textarea cols="10" rows="5" name="baz"></textarea> 
    <select name="ber"><option>foo</option></select> 
</div> 
</form> 

CSS 代碼:

div { 
    margin-left: 100px; 
    width: 100%; /* gives "layout" */ 
} 

條件注釋代碼：

<!--[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相關的表單元素中。

原文鏈接：http://haslayout.net/css/Form-Control-Double-Margin-Bug

譯文鏈接：http://blog.jobbole.com/47526/