CSS textarea 宽度与 Firefox 中的输入宽度不同答案

【问题标题】：CSS textarea widths differ from input widths in firefoxCSS textarea 宽度与 Firefox 中的输入宽度不同
【发布时间】：2012-05-31 02:55:19
【问题描述】：

我正在使用 css 设置文本输入和文本区域的宽度：

input[type=text], 
input[type=file],
textarea {
    width: 305px;
}

由于某些原因，在 Firefox 中，文本区域的宽度显得更短：

在 safari 和 chrome 中运行良好。我该如何解决这个问题？

解决方案：

如此处所述： Unable to set textarea width with CSS 添加：

padding: 0;
border: 1px solid #ccc;

成功了。

【问题讨论】：

在我回答之后，我意识到我们这里有一个类似的问题：stackoverflow.com/questions/509529/…

标签： html css firefox cross-browser

【解决方案1】：

我相信这是因为 input 标签和 textarea 标签默认有不同的边框。尝试在 CSS 中添加边框以实现相同的宽度。

input[type=text],
input[type=file],
textarea {
    width: 305px;
    border: 1px solid black;
}

这是一个例子：http://jsfiddle.net/Das2q/

【讨论】：

【解决方案2】：

您可以将所有输入字段放入给定宽度的<div> 中，并使<input> 和<textarea> 字段的宽度为100%。

【讨论】：

需要重写很多 html 以适应这种情况。
我的意思是将所有字段放在一个大<div> 中，而不是将每个字段放在一个中，尽管这也可以。
你检查过那个链接了吗？尝试在<input> 和<textarea> 上使填充和边框相同。
这样做需要我将标签与输入分开到两个单独的 div 中。在我看来，这种风格很糟糕，因为两者密切相关并且属于同一类。

【解决方案3】：

你用的是哪个版本的FF？我用 12.0 试了一下，感觉还不错。

试试这个简单的版本，看看它是否仍然被抛弃。您的 css 定义的另一部分可能存在问题。

<html>

<head>
<style type="text/css">
    input[type=text], 
    input[type=file],
    textarea {
        width: 305px;
    }   
</style>
</head>

<body>

<form>
    <input type="text" /><br/>
    <textarea></textarea>
</form>

</body>
</html>

【讨论】：