受影響版本

該BUG影響：IE7、IE6

表現(xiàn)

<input>和<textarea>元素會從用擁有邊距（margin）屬性和布局的父節(jié)點繼承水平方向的邊距（margin）屬性。

教程日期

2009-08-17 22:37:49 星期一

描述

這是我在Gérard Talbot 的 IE7 BUG 集合頁上發(fā)現(xiàn)的另外一個BUG。 雙邊距 Bug現(xiàn)在有了新的表現(xiàn)，而且在IE7下也出現(xiàn)了?，F(xiàn)在它主要的表現(xiàn)是影響了<input>和<textarea>元素。讓我們來看一下示例。

示例

示例在一個單獨頁面上。

注意：雖然該演示顯示了合法的HTML標(biāo)記，但它并不是創(chuàng)建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" */ 
} 

現(xiàn)在，我們有一個擁有布局并且設(shè)置了margin-left屬性的父節(jié)點。在IE6與IE7中，<input> 和<textarea>元素的表現(xiàn)看起來就好像它們從父節(jié)點<div>那里繼承了margin屬性一樣，這樣它們的margin 屬性的值就是雙重疊加的。在父節(jié)點上設(shè)置margin-right屬性結(jié)果也是一樣的。在功能更健全的瀏覽器中，<input> 和<textarea>元素在垂直方向上應(yīng)該和<select>對齊。

解決方案

下面是按照解決方案類型排序的對上述問題的解決方案。

解決方案(條件注釋解決方案)

解決方案日期

2009-08-17 22:37:49 星期一

修復(fù)版本

所有受影響版本

描述

對于本BUG的修復(fù)是一個相當(dāng)暴力直接的解決方案。讓我們一起看一下： 修復(fù)后的實例在一個單獨頁面上。

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]--> 

讓我們來分解一下我在這里的解決辦法。這個是迄今為止我發(fā)現(xiàn)的唯一一個解決方案。我通過使用條件注釋來針對IE6和IE7做了處理，您也可以選擇任 何您喜歡的方式來達(dá)成這個目標(biāo)。對于這些特定版本的IE瀏覽器，我為<input>和<textarea>設(shè)置了與父節(jié)點中的 margin-left屬性值大小相等，符號相反的margin-left值?，F(xiàn)在，在受該BUG影響瀏覽器中，所有的元素都像他們應(yīng)該表現(xiàn)的那樣， 與<select>元素在垂直方向?qū)R。該方案對于margin-right來說同樣適用。

注釋：你可以直接使用我在CSS里定義的選擇條件，這不算惡意侵權(quán)。要確保修正其中margin的負(fù)數(shù)，把它只應(yīng)用到和這個bug相關(guān)的表單元素中。

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

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