如何强制 Firefox 渲染文本区域填充与 div 中的填充相同？
我试图在 IE8、Firefox 和 Safari 的文本区域内提供一致的每行宽度（以像素为单位），以便文本内容尽可能可预测且一致地换行。
Firefox 做了一些有点奇怪的事情：与其他两个浏览器以及类似配备的 div 块相比，它有一个额外的像素填充，占用了文本区域的内容空间。
当将该类应用于文本区域和 div 时，差异是可见的，div 中的文本接触红色背景的左外边缘，但文本区域中的文本具有 1 px 类似填充的偏移量，尽管填充为零：
.testbox{
padding:0;
margin:0;
border:0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
与 div 相比，其他填充值最终会显示一个额外的偏移像素。
关于是否有办法欺骗 Firefox 将文本区域渲染为 div，或者调整文本区域的非填充但看起来像填充属性，有什么想法吗？
I'm attempting to provide a consistent width per line in pixels inside of a textarea across IE8, Firefox and Safari, so that text content wraps lines as predictably and consistently as possible.
Firefox is doing something a little bit odd: it has an extra pixel of padding eating out of the content space of the textarea vs the other two browsers, and vs a similarly equipped div block.
When applying this class to both a textarea and a div the difference is visible, with the text in the div touching the outer left edge of the red background but the text in the textarea have 1 px padding-like offset in spite of padding being zero:
.testbox{
padding:0;
margin:0;
border:0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
Other values for padding wind up displaying one extra pixel of offset vs a div.
Any ideas on if there's a way to trick Firefox to render a textarea as if it were a div, or to adjust this not-padding-but-looks-like-padding property for a textarea?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我最近一直在对OP描述的问题进行一些研究关于SO的类似问题。似乎 Firefox 中的一个错误导致在
textarea元素上呈现所谓的“not-padding-but-looks-like-padding”。通常，这种额外的填充并不是真正的问题，但是当您想要使两个元素保持相同的宽度，并且您关心使其内容以相同的方式包装在两个元素中时，它就会成为问题。
让
textarea的内容与 Firefox 中的div元素相同似乎不可能摆脱这个
1.5px宽填充在 Firefox 中的textarea上，因此如果您想确保 Firefox 中div内包装的内容与textarea< 内包装的内容完全相同/code> 在 Firefox 中，最好的方法似乎是在div内的右侧和左侧添加额外的1.5px填充，但仅限于 Firefox 。您可以通过在div上设置以下供应商特定的前缀 CSS 属性来实现此目的：第一个确保
div上设置的填充不会增加的宽度>div，接下来的两个确保在div的右侧和左侧设置1.5px的填充。这种方法不会影响
div在任何其他浏览器中的渲染，也不需要，因为textarea在其他浏览器中不会渲染任何内容额外的填充。但它确保 Firefox 中的div和textarea之间不存在内容包装差异，只要它们共享相同的font-family和font-size属性等等。这是用于演示目的的 jsFiddle。
让
textarea在浏览器中一致地换行内容如果您只想确保 Firefox 中的
textarea与textarea具有相同的宽度和换行行为code>在其他浏览器中，可以将其box-sizing设置为border-box，在5.5两侧添加一个并将paddingpx-moz-padding-end和-moz-padding-start设置为0px。这是一个 jsFiddle 展示了这种方法。
I have recently been doing some researching on the problem described by OP for a similar question on SO. It seems that a bug in Firefox is causing the rendering of this so called "not-padding-but-looks-like-padding" on
textareaelements.Usually this extra padding is not really an issue, but it becomes an issue when you want to keep two elements the same width, and you care about getting its content to wrap the same way in both elements.
Getting
textarea's to wrap content the same as e.g.divelements in FirefoxIt seems to be impossible to get rid of this
1.5pxwide padding on thetextareain Firefox, so if you want to ensure that the content wrapping inside adivin Firefox behaves exactly the same as the content wrapping inside atextareain Firefox, the best approach seems to be to add an additional1.5pxof padding on the right and the left hand side inside thediv, but only in Firefox. You can accomplish this by setting the following vendor specific prefixed CSS properties on yourdiv:The first ensures that the padding set on the
divdoes not increase the width of thediv, and the next two ensure that1.5pxof padding will be set on the right and the left hand side of thediv.This approach does not affect the rendering of the
div's in any other browsers, it doesn't need to, astextarea's in other browsers don't render any extra padding. But it ensures that there are no content wrapping differences betweendiv's andtextarea's inside Firefox as long as they share the samefont-familyandfont-sizeproperties and so on.Here's a jsFiddle for demonstration purposes.
Getting
textarea's to wrap content consistently across browsersIf you only wanted to ensure that a
textareain Firefox has the same width and wrapping behaviour as atextareain other browsers, you can set itsbox-sizingtoborder-box, add apaddingon both sides of5.5pxand set-moz-padding-endand-moz-padding-startto0px.Here's a jsFiddle showing this approach.
哇，我还不知道答案，但我确实尝试了一些东西，它看起来就像一个文本区域，当你向它应用边框、边距和填充时，不会改变它的宽度，而是将边框等放在里面。试试这个：
你可以通过使用类似这样的东西来解决这个问题：
css：
这似乎也适用于 IE，除了 -1px 之外，它会使布局关闭（一个）。
Wow, I don't know the answer yet but I did try some stuff, and it appears as though a textarea, when you apply borders, margins and padding to it, doesn't change its width but puts the borders etc. on the inside. Try this:
You could work around this by using something like this:
css:
This also seems to work in IE, except for the -1px, which throws the layout off (by one).
这是 Firefox 中的一个错误，几天前已修复。该修复将在 Firefox 29 中发布。
我已经尝试过最新的 nightly build，textara bug 消失了！
This is a bug in firefox which got fixed a few days ago. The fix will be released with Firefox 29.
I already tried the latest nightly build and the textara bug is gone!
我面临着同样的问题，虽然我的解决方案对于那个像素来说似乎向后弯曲太多，但它解决了问题，这里是：为了统一宽度，因为这种奇怪的行为，我没有使用 div，而是使用了禁用的具有白色背景和默认光标的文本区域可充当 div 的模仿。
I was facing the same problem and although my solution seemed like bending backwards too much for that one pixle, but it fixed the problem, here goes: To unify the width because of this weird behavior, Instead of using a div, i used a disabled textarea with a white background and a default cursor to act as a mimic the div.
我遇到了类似的问题，带有背景图像和填充的链接标签在 Firefox 上显示效果不佳。当多行时，填充和背景似乎适用于文本行，而不是文本块。我测试了一些东西，最终使用了“display:block;”在元素 css 上。为我工作。
I was having a similar problem, a link tag with a background image and padding did not display well on firefox. The padding and background seemed to apply to the line of text, not the block of text, when multiline. I tested out a few things, and ended up using a "display:block;" on the element css. Worked for me.