Html 如何使文本框和文本区域具有相同宽度的跨浏览器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/531462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a textbox and a textarea same width cross-browsers?
提问by Waleed Eissa
Setting the width of both the textbox (ie. input type="text") and the textarea to 500px doesn't work in IE6 and Chrome, only works fine in FF2 (haven't tested other browsers), IE and Chrome add two pixels to the textbox.
将文本框（即 input type="text"）和 textarea 的宽度设置为 500px 在 IE6 和 Chrome 中不起作用，仅在 FF2 中工作正常（尚未测试其他浏览器），IE 和 Chrome 添加两个像素到文本框。
Padding and margin is set to 0 on all elements using
使用以下方法将所有元素的填充和边距设置为 0
*
{
margin: 0px;
padding: 0px;
}
Changing the doctype from xhtml 1.0 transitional to strict didn't work too.
将文档类型从 xhtml 1.0 过渡更改为严格也不起作用。
回答by Paolo Bergantino
You need to explicitly set a border of 1px and make the width 498px, or make the border 0 and the width 500px, although the latter will make the input impossible to see unless you know it's there, so from there it's just a styling issue.
您需要明确设置边框为 1px 并使宽度为 498px，或将边框设为 0 和宽度为 500px，尽管后者会使输入无法看到，除非您知道它在那里，因此从那里开始它只是一个样式问题。
回答by Matt Howell
You might have some luck using a set of reset stylesin your CSS. They go a long way to eliminating the cross-browser differences between the way elements are rendered.
在 CSS 中使用一组重置样式可能会有一些运气。它们在消除元素呈现方式之间的跨浏览器差异方面大有帮助。
Eric Meyer (one of the web's best minds on CSS) describes reset styles and why he uses them here-- with his latest version here.
Eric Meyer（网络上最擅长 CSS 的人之一）描述了重置样式以及他在这里使用它们的原因——他的最新版本在这里。
That said, without knowing the overall effect you're trying to achieve, form elements are notoriously difficult to style in a way that is perfectly consistent across browser platforms. Best of luck. :)
也就是说，在不知道您要实现的整体效果的情况下，众所周知，表单元素很难以跨浏览器平台完全一致的方式进行样式设置。祝你好运。:)
回答by Justin
I use CSS3 to make textbox and input work the same. See jsFiddle.
我使用 CSS3 使文本框和输入的工作相同。参见 jsFiddle。
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Works in IE8+, see caniuse.
适用于 IE8+，请参阅 caniuse。
回答by Tariq Amin
I have been experimenting and found out that "the ratio" between text input and textarea can be calculated using 21 * 8*x.
我一直在试验，发现可以使用 21 * 8 * x 计算文本输入和文本区域之间的“比率”。
If you have
如果你有
< input type="text" size="X" />< br/> < textarea cols="X">< /textarea>
<input type="text" size="X" />< br/> < textarea cols="X"></textarea>
... and you want them to be equally wide, use this formula to calculate the width for the input text.
...并且您希望它们的宽度相同，请使用此公式计算输入文本的宽度。
if x = 70 then 21*8*70 = 581px
如果 x = 70 那么 21*8*70 = 581px
So you will write:
所以你会写：
< input type="text" size="70" style="width: 581px" />< br/> < textarea cols="70">< /textarea>
<input type="text" size="70" style="width: 581px" />< br/> < textarea cols="70"></textarea>
The two will become equal!
两者将变得平等！
In this way in a program/website/etc you can enter the same value and get the same result (cols in textarea)!
通过这种方式在程序/网站/等中您可以输入相同的值并获得相同的结果（文本区域中的列）！
回答by Adriana
I also think that the problem is in border. Try defining the border style specifically for inputs/textarea together with their width.
我也认为问题出在边界上。尝试定义专门用于输入/文本区域的边框样式及其宽度。
input, textarea{ border:1px solid grey; width:498px; }
输入，textarea{ 边框：1px 纯灰色；宽度：498px；}
Also take a look in the source if input/textarea is not defined anywhere else or in their own tag (e.g. size or rows/cols). Other option when IE messes around is using special css file for it. However IMHO it shouldn't be necessary in your case.
如果 input/textarea 没有在其他任何地方或它们自己的标签（例如大小或行/列）中定义，还要查看源代码。IE 混乱时的其他选择是使用特殊的 css 文件。但是恕我直言，在您的情况下应该没有必要。
回答by Adriana
I would recommend first to avoid that "star" reset rule, as it only brings problems down the line. Instead prefer a specific reset like
我首先建议避免使用“星号”重置规则，因为它只会带来问题。而是更喜欢特定的重置，例如
ul, ol, p, blockquote, h1, h2 /etc.../ { margin:0; padding:0; }
ul, ol, p, blockquote, h1, h2 / etc.../ { margin:0; 填充：0; }
FORM ELEMENTs, in fact, is where the star rule does the most damage.
事实上，形元素是星形规则造成最大伤害的地方。
AFAIK, setting padding and width explicitly to a textarea and an input element, will give the exacts same pixel width in all browsers.
AFAIK，明确地为 textarea 和 input 元素设置填充和宽度，将在所有浏览器中提供完全相同的像素宽度。
IE6 does add a 1px margin to the TOP and BOTTOM I believe, not the sides.
我相信 IE6 确实为顶部和底部添加了 1px 的边距，而不是两侧。
Here's an example of a RESET rule taht does'nt break the default properties of form elements:
下面是一个 RESET 规则的例子，它不会破坏表单元素的默认属性：
/*---------------------------*/
/* Base rules & reset */
/*---------------------------*/
body {
font-size:11px; line-height:1.2em; font-family:Verdana, Arial, sans-serif;
margin:0; padding:0;
background:#fff url(/01/images/cassis/body-bg.gif) repeat-x 50% 0;
color:#303030;
}
p, pre, blockquote, address, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, form, label, fieldset { margin:0; padding:0; }
ul, ol, li { list-style:none; }
input, select, textarea { font:11px Arial, sans-serif; color:#333; line-height:1.2em; }
table, caption, td, th { margin:0; padding:0; font-size:11px; line-height:1.2em; font-weight:normal; }
img { display:inline; }
/* cross-browser clearing of floats (no extra space in IE) */
div.clear { clear:both; overflow:hidden; height:0; }
These are just random, but you get the idea. Don't clear margin and padding on everything, it's much safer to clear what you need to, and leave the browser defaults elsewhere.
这些只是随机的，但你明白了。不要清除所有内容的边距和填充，清除您需要的内容并将浏览器默认值保留在其他地方更安全。
回答by benmmc
Try
尝试
input{
border:none;
}
回答by Thiru
<!--***********************CSS**************************-->
<style>
.set_font
{
font-family:verdana;
font-size:10px;
color:#ffffff;
width:250px;
}
.set_font2
{
font-family:verdana;
font-size:10px;
color:#000000;
width:250px;
}
</style>
<!--*******************HTML**************************-->
<input type="text" size="33" class="set_font2" name="inputName" id="inputName" value="inputValue" maxlength="50">
<textarea cols="30" rows="8" class="set_font2" name="inputName" id="inputName">inputValue</textarea>
