html - 规范化 Internet Explorer 中的 textarea 元素

Question

在所有版本的 Internet Explorer（包括版本 11 beta）中，该元素textarea比任何其他浏览器中具有相同宽度的文本区域低 1 像素或 2 像素。怎么解决？

Answer 1

为了解决 IE 11 的布局问题（并使所有浏览器的布局外观看起来 99% 相似），建议使用 CSS Reset。

在http://cssreset.com复制并粘贴 CSS 重置脚本

Answer 2

设置height在textarea元素上，并设置display: block在它上面（以使其height适用）。示例（您当然应该在现实生活中使用外部样式表）：

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

使用height等于1.2em行数乘以的值似乎可以正常工作。对于您通常要在textarea. 其余的用于处理浏览器默认值的差异。

说明：如果您textarea在浏览器的开发者工具中查看一个元素，您会发现填充和边框值相同，但内容高度不同。原因是textarea格式是特定于浏览器的，高度计算不仅基于字体大小，还基于与浏览器相关的规则。浏览器允许您覆盖它。

您可以另外设置这些，因为它们对应于常见的浏览器默认值，但某些浏览器可能会有所偏差（这通常不相关，但如果您针对像素精确度可能很重要）：

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

Answer 3

看看 Chrome 和 IE，他们height为margin一个没有样式的textarea. 为了获得跨浏览器的一致性，最好的办法是明确所有盒子模型的属性，像这样（随机选择的值，但你明白了）：

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

希望这可以帮助。