Question

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

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

由于某些原因，在firefox中，textarea宽度显得更短：

enter image description here

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

解决方案：

如下所述： Unable to set textarea width with CSS 中加入：

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

诀窍。

Answer 1

我认为这是因为输入标签和textarea标签默认具有不同的边框。尝试为CSS添加边框以获得相同的宽度。

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

以下是一个示例：http://jsfiddle.net/Das2q/

Answer 2

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

Answer 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>

CSS textarea宽度与firefox中的输入宽度不同

3 个答案: