在Internet Explorer中規范化textarea元素

Question

在所有版本的Internet Explorer（包括版本11 beta）中，元素textarea比其他任何瀏覽器中具有相同寬度的textarea低1px或2px。 怎么解決？

Answer 1

為了解決IE 11的布局問題（並使所有瀏覽器的布局外觀看起來都相似，達到99％），建議使用CSS Reset。

將CSS重置腳本復制並粘貼到http://cssreset.com

Answer 2

僅查看Chrome和IE，他們為原本沒有樣式的textarea設置了略有不同的默認height和margin屬性。 為了獲得跨瀏覽器的一致性，最好的選擇是明確所有框模型屬性（如下所示）（隨機選擇值，但您會明白）：

texarea {
    width: 400px;
    height: 100px;
    padding: 0;
    border: 1px solid #999;
    margin: 0;
}

希望這可以幫助。

Answer 3

在textarea元素上設置height ，並在其上設置display: block （以使height適用）。 示例（您當然應該在現實生活中使用外部樣式表）：

<textarea rows=10 style=
"display: block; height: 12em; line-height: 1.2; font-size: 90%; margin: 0">

使用等於1.2em倍行數的height值似乎可以正常工作。 對於通常要在textarea使用的字體，應該足夠了。 剩下的就是處理瀏覽器默認設置的差異。

說明：如果在瀏覽器的開發人員工具中查看textarea元素，則可以看到padding和border值相同，但內容高度不同。 原因是textarea格式是特定於瀏覽器的，高度計算不僅基於字體大小，而且還基於與瀏覽器相關的規則。 瀏覽器可讓您覆蓋此設置。

您可以另外設置這些設置，因為它們與常見的瀏覽器默認設置相對應，但是某些瀏覽器可能會有所不同（通常無關緊要，但是如果您針對像素精確度可能會有所不同）：

textarea { padding: 2px; border-width: 1px; }