如何强制Firefox渲染textarea填充与div中相同？

Question

我试图在IE8,Firefox和Safari中的textarea内部以像素为单位提供一致的宽度,以便文本内容尽可能地以可预测和一致的方式包装行.

Firefox正在做一些有点奇怪的事情:它在textarea的内容空间与其他两个浏览器之间有一个额外的填充像素,与一个类似装备的div块相比.

将此类应用于textarea和div时,差异是可见的,div中的文本触及红色背景的左外边缘,但textarea中的文本尽管填充为零,仍具有1 px填充式偏移:

.testbox{
    padding:0;
    margin:0;
    border:0;
    background: red;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 16px;
}

填充的其他值最终显示一个额外的偏移像素与div.

关于是否有办法欺骗Firefox渲染textarea就好像它是一个div,或者为textarea调整这个不填充但看起来像填充属性的任何想法？

Answer 1

哇，我还不知道答案，但我确实尝试了一些东西，它看起来就像一个文本区域，当你向它应用边框、边距和填充时，不会改变它的宽度，而是将边框等放在里面。尝试这个：

.testbox {
    padding: 10;
    margin: 10;
    border: 5px solid black;
    background: red;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 16px;
}

您可以通过使用类似以下内容来解决此问题：

<div class="testbox">
    <textarea class="testarea"></textarea>
</div>

CSS：

.testbox {
    padding: 0;
    margin: 0;
    border: 0;
    background: red;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 16px;
}

.testarea {
    padding: 0;
    margin: 0 -1px;
    border: 0;
    background: red;
    width: 100%;
    height: 100%;
    font-size: 12px;
    line-height: 16px;
}

这似乎也适用于 IE，除了 -1px 之外，它会使布局偏离（一）。