logo标签列表

CSS中Firefox浏览器中textarea的宽度与input的宽度不同

htmlcssfirefoxcross-browser
3

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

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

由于某种原因，火狐浏览器的文本区域宽度似乎较短：

enter image description here

Safari和Chrome中正常工作。如何解决这个问题？

解决方案：

如下所述： 无法使用CSS设置文本区域宽度 添加以下内容：

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

可以胜任。这个短语的意思是“达到目的”。
回答完后，我意识到我们在这里有一个类似的问题：https://dev59.com/8XRB5IYBdhLWcg3wyqKo - woz
3个回答
2

我认为这是因为输入标签和文本域标签默认具有不同的边框。尝试在你的CSS中添加边框以实现相同的宽度。

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

这是一个示例： http://jsfiddle.net/Das2q/
0
你可以把所有的输入字段放到一个给定宽度的 div 里，并将 input 和 textarea 字段的宽度设为 100%。
需要重写大量的HTML来适应这个需求。 - TheOne
我的意思是将所有字段放入一个大的<div>中，而不是将每个字段放入一个<div>中，尽管这种方法也可能有效。 - woz
你检查了那个链接吗？尝试在<input>和<textarea>上使填充和边框相同。 - woz
用这种方式做将需要我将标签和输入分别放在两个不同的div中。在我看来，这样做会让代码风格变得不好，因为这两个部分是密切相关且应该在一起。 - TheOne
0
你用的是哪个版本的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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接