html - Firefox textarea 列与属性值不同

Question

在我制作的网站上，我有一个这样的文本区域:

<textarea maxlength="1240" rows="20" cols="60" name="sub" style="color: #a7c1c5; background: black;"></textarea>

仅在 Firefox 上，此文本区域有 62 列而不是 60 列。这会导致我的网站出现问题，因为我需要文本完全适合文本区域。这会导致其他浏览器(如 Chrome 或 Opera)显示文本不正确。无论如何，如何在所有浏览器上强制文本区域为 60 列？

奇怪的是，行不受影响。

我也有一些 CSS 修改了填充，但问题仍然存在。

Here is a jsfiddle demoing the issue, error only happens in Firefox

Answer 1

可悲的是，firefox 错误已经有一段时间了，您必须检测用户代理并通过 JS 调整 cols 值。

if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
   document.querySelector('#myTextarea').cols = '58';
}

<textarea id="myTextarea" placeholder="wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwAs you can see, this is 62 w's instead of 60" maxlength="1240" rows="20" cols="60" name="sub" style="color: #a7c1c5; background: black;"></textarea>