无法使用 CSS 设置 textarea 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/509529/
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
Unable to set textarea width with CSS
提问by ryonlife
I have attempted to use this CSS to set the width of my form elements:
我尝试使用此 CSS 来设置表单元素的宽度：
input[type="text"], textarea { width:250px; }
If you look at this Firefox screenshot you'll see that the fields are not the same width. I get a similar effect in Safari.
如果您查看此 Firefox 屏幕截图，您会发现这些字段的宽度不同。我在 Safari 中得到了类似的效果。
alt text http://screamingv.com/ss.png
替代文字 http://screamingv.com/ss.png
Are there any workarounds?
有什么解决方法吗？
UPDATE: Thanks for the info so far. I've now made sure padding/margin/border on both elements are set the same. I was still having the problem. The original CSS I posted was simplified... I was also setting the height of the textarea to 200px. When I remove the height styling, the widths match. Weird. That makes no sense.
更新：感谢您提供的信息。我现在确保两个元素上的填充/边距/边框设置相同。我仍然有问题。我发布的原始 CSS 被简化了......我还将 textarea 的高度设置为 200px。当我删除高度样式时，宽度匹配。奇怪的。这是没有意义的。
Browser bug?
浏览器错误？
采纳答案by Andy Ford
Try removing padding and borders. Or try making them the same for both elements
尝试删除填充和边框。或者尝试使它们对两个元素都相同
input[type="text"],
textarea {
width:250px;
padding: 3px;
border: none;
}
Or:
或者：
input[type="text"],
textarea {
width:250px;
padding: 0;
border: 1px solid #ccc;
}
INPUT and TEXTAREA elements often have some padding applied by the browser (varies by browser) and this can make things appear effectively wider than the assigned width.
INPUT 和 TEXTAREA 元素通常有一些由浏览器应用的填充（因浏览器而异），这可以使事物看起来比指定的宽度更宽。
UPDATE: also box-sizing: border-box;is a handy way to set widths that that padding and border will eat into rather than add onto. See: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
更新：也是box-sizing: border-box;设置填充和边框将吞噬而不是添加的宽度的一种方便的方法。参见：http: //www.paulirish.com/2012/box-sizing-border-box-ftw/
回答by Neill Jones
This answer is three years late, but I'm posting it here just in case anyone else is trying to set the width in em'sand not pixelsand comes across this post (as I just did). Make sure the font-size is the same,
这个答案晚了三年，但我将它发布在这里，以防万一其他人试图设置宽度，em's而不是pixels遇到这篇文章（就像我刚刚做的那样）。确保字体大小相同，
e.g.
例如
input, textarea {
font-size:12px;
width:20em;
padding:0;
margin:0
}
otherwise the textarea may be a different size (true on FF12).
否则 textarea 可能是不同的大小（在 FF12 上为 true）。
回答by Luca Matteis
Try border:0; or border: 1px solid #000;
尝试边界：0; 或边框：1px 实心 #000；
回答by Nathan
This is probably caused by different default margins on the <input>and <textarea>elements. Try using something like this.
这可能是由<input>和<textarea>元素上的不同默认边距引起的。尝试使用这样的东西。
input[type="text"], textarea {
padding: 0;
margin: 0;
width:250px;
}
回答by Kaivosukeltaja
I was struggling with this kind of problem too, and this question was the first result of my googling. What finally worked for me was setting box-sizing: content-boxfor the textarea - Drupal 7 defaults this to border-boxwhich causes the padding and border width to be subtracted from the size of the textarea.
我也在为这种问题苦苦挣扎，这个问题是我谷歌搜索的第一个结果。最终对我box-sizing: content-box有用的是设置textarea - Drupal 7 默认设置为border-box这会导致填充和边框宽度从 textarea 的大小中减去。
回答by silvachathura
Set width 100% and then use max-width:
将宽度设置为 100%，然后使用 max-width：
textarea {
width:100%;
max-width:250px;
}
// removed margin and padding, you can add it if you want.
// 移除了边距和填充，你可以根据需要添加它。
回答by davidman77
you may use:
你可以使用：
input[type="text"], textarea {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
回答by heeen
Maybe you have a user specific css overlay defined somewhere in your browser, because i just tested it and it works as expected: http://jsbin.com/exase/edit(Tested on windows. Maybe Apple native widgets have some quirk?)
也许您在浏览器的某处定义了一个用户特定的 css 覆盖，因为我刚刚测试了它并且它按预期工作：http: //jsbin.com/exase/edit（在 Windows 上测试。也许 Apple 本机小部件有一些怪癖？）
