如何强制Firefox渲染textarea填充与div相同？ [英] How to force Firefox to render textarea padding the same as in a div?

问题描述

我试图在IE8，Firefox和Safari之间的文本区域中以像素为单位提供一致的宽度，以便文本内容尽可能可预测和一致地包装行。

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有点奇怪：它有一个额外的像素padding吃了textarea的内容空间与其他两个浏览器，和一个类似装备的div块。

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.

将此类应用于textarea和div时，差异是可见的，div中的文本触及红色背景的外部左边缘，但textarea中的文本具有1像素填充 - 尽管填充为零，但仍然有偏移：

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

填充的其他值会显示一个额外的偏移像素和一个div。

Other values for padding wind up displaying one extra pixel of offset vs a div.

任何想法，如果有一个方法来诱骗Firefox渲染一个textarea，就像它是一个div，或调整这个不填充，但是看起来像 - padding属性为一个文本区域？

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?

推荐答案

我最近一直在做一些研究的问题描述OP为< http://stackoverflow.com/a/16532848/1846192\"> SO上的类似问题。看来，Firefox中的一个错误导致在 textarea 元素上呈现这种所谓的非填充 - 但是看起来像填充。

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 textarea elements.

通常，这个额外的填充不是真正的问题，但是当你想保持两个元素的宽度相同，并且你关心得到它的内容

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.

似乎不可能摆脱这个 1.5px c> c> c> ，所以如果你想确保内容包裹在 div 在Firefox中的行为与包含在 textarea 中的内容完全相同，最好的办法似乎是添加一个额外的 1.5在 div 内右侧和左侧的填充的px ，但仅在Firefox中。您可以通过在 div 上设置以下供应商特定的前缀CSS属性来实现此目的：

It seems to be impossible to get rid of this 1.5px wide padding on the textarea in Firefox, so if you want to ensure that the content wrapping inside a div in Firefox behaves exactly the same as the content wrapping inside a textarea in Firefox, the best approach seems to be to add an additional 1.5px of padding on the right and the left hand side inside the div, but only in Firefox. You can accomplish this by setting the following vendor specific prefixed CSS properties on your div:

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

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

The first ensures that the padding set on the div does not increase the width of the div, and the next two ensure that 1.5px of padding will be set on the right and the left hand side of the div.

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

This approach does not affect the rendering of the div's in any other browsers, it doesn't need to, as textarea's in other browsers don't render any extra padding. But it ensures that there are no content wrapping differences between div's and textarea's inside Firefox as long as they share the same font-family and font-size properties and so on.

以下是 jsFiddle

Here's a jsFiddle for demonstration purposes.

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

If you only wanted to ensure that a textarea in Firefox has the same width and wrapping behaviour as a textarea in other browsers, you can set its box-sizing to border-box, add a padding on both sides of 5.5px and set -moz-padding-end and -moz-padding-start to 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 显示此方法。

这篇关于如何强制Firefox渲染textarea填充与div相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！