修复mozilla firefox中的文本区域问题
修复mozilla firefox中的文本区域问题
提问于 2016-02-10 11:41:18
<form action="#" method="post" id="f">
<h3>Got a question? Post here for discussion!</h3>
<input type="text" name="title" placeholder="Write a Title..." size="82" required="required" />
<br/>
<textarea cols="83" rows="4" name="content" placeholder="Write description..." required="required"></textarea>
<br />
<input type="submit" name="sub" value="Post to Timeline" />
</form>
当我在Google Chrome中运行上面的代码时，文本区域的长度和输入的文本“type=”是一样的，但在mozilla firefox中，文本区域变得比正式文本要长。有什么帮助吗？
回答 3
Stack Overflow用户
发布于 2016-02-10 11:51:46
您是否尝试使用CSS而不是html来指定宽度和高度？
textarea {
width: 600px;
height: 100px;
}看看会不会有什么不同。如果需要，您可以更改像素。我刚选了一个很接近的。
Stack Overflow用户
发布于 2016-02-10 11:52:02
这是因为：
size和cols指定的是字符数，而不是长度。但是字符的宽度取决于字体，默认情况下input和textarea使用不同的字体。指定一种通用字体以防止this.textarea溢出，然后保留一些额外的空间以备需要滚动条时使用。使用overflow: hidden来防止这种情况。
input, textarea {
font-family: monospace;
overflow: hidden;
}<form action="#" method="post" id="f">
<h3>Got a question? Post here for discussion!</h3>
<input type="text" name="title" placeholder="Write a Title..." size="32" required="required" />
<br/>
<textarea cols="32" rows="4" name="content" placeholder="Write description..." required="required"></textarea>
<br />
<input type="submit" name="sub" value="Post to Timeline" />
</form>
也就是说，您可能更喜欢使用CSS width属性。
Stack Overflow用户
发布于 2016-02-10 11:52:15
不要使用cols和rows属性。使用CSS、width和height属性来确保跨浏览器的一致体验。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35306414
复制相关文章
相似问题
腾讯云开发者
