如何强制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

我最近一直在研究OP为a similar question on SO描述的问题。似乎Firefox中的一个错误导致在textarea元素上呈现这种所谓的“不填充但看起来像填充”。

通常这个额外的填充并不是一个真正的问题，但是当你想要保持两个元素的宽度相同时，它会成为一个问题，而你关心的是让它的内容在两个元素中以相同的方式包装。

获取textarea以包装与内容相同的内容Firefox中的div个元素

似乎无法在Firefox中的1.5px上删除此textarea广泛填充，因此如果您想确保Firefox中div内的内容包装行为与Firefox中textarea内的内容包装完全相同，最好的方法似乎是在1.5px内的右侧和左侧添加额外的div填充，但仅限于Firefox。您可以通过在div上设置以下特定于供应商的前缀CSS属性来完成此操作：

-moz-box-sizing: border-box;
-moz-padding-end: 1.5px; 
-moz-padding-start: 1.5px; 

第一个确保div上的填充设置不会增加div的宽度，接下来的两个确保在右侧设置1.5px填充div的左侧。

这种方法不会影响div在任何其他浏览器中的呈现，它不需要，因为textarea在其他浏览器中不呈现任何额外的填充。但它确保Firefox中的div和textarea之间没有内容包装差异，只要它们共享相同的font-family和font-size属性等等

这是一个 jsFiddle 用于演示目的。

获取textarea以跨浏览器一致地包装内容

如果您只想确保Firefox中的textarea与其他浏览器中的textarea具有相同的宽度和包装行为，则可以将其box-sizing设置为border-box }，在padding的两边添加5.5px，并将-moz-padding-end和-moz-padding-start设置为0px。

textarea {
    padding: 0 5.5px 0 5.5px;
    -moz-padding-end: 0px;
    -moz-padding-start: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

这是显示这种方法的 jsFiddle 。

Answer 2

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

.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，它会抛出布局（一个）。

Answer 3

几天前This is a bug在firefox中的

got fixed。修复程序将在Firefox 29中发布。

我已经尝试过最新的夜间版本，textara bug已经消失了！

Answer 4

我遇到了同样的问题，虽然我的解决方案似乎对于那个像素向后弯曲太多，但它解决了问题，这里说：为了统一宽度，因为这种奇怪的行为，而不是使用div，我使用带有白色背景的残疾文本区域和默认光标作为模仿div。

Answer 5

我遇到了类似的问题，带有背景图片的链接标记和padding在firefox上显示效果不佳。当多行时，填充和背景似乎适用于文本行，而不是文本块。我测试了一些东西，最后使用了“display：block;”在元素css上。为我工作。