在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; }