Question

＆＃13;

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

＆＃13;

当我在Google Chrome中运行上面的代码时，textarea的长度和输入类型=＆＃34; text＆＃34;是相同的，但在mozilla firefox中，textarea变得比正式更长。有什么帮助吗？

Answer 1

您是否尝试使用CSS而不是html指定宽度和高度？

textarea {
  width: 600px;
  height: 100px;
}

看看是否有所作为。如果需要，您可以更改像素。我刚刚选择了一些东西。

Answer 2

那是因为：

size和cols指定了多个字符，而不是长度。但字符的宽度取决于字体，input和textarea默认使用不同的字体。指定一个常用字体以防止这种情况。
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属性。

Answer 3

请勿使用cols和rows属性。使用CSS width和height属性可确保跨浏览器的一致体验。

修复mozilla firefox中的textarea问题

3 个答案: