让 TextArea 在不同浏览器中看起来都一样？

Question

这个问题我还没有找到满意的答案，所以我来了，

这就是我的 textarea 在 Chrome 上的样子：

这是同一页面在 FireFox 上的样子：

这是该文本区域的 HTML：

<textarea class="t-field" cols="58" id="message" name="message" rows="6"></textarea>

所以，我想知道的是... CSS 技巧让文本区域在浏览器中表现相同并看起来相同？

预先感谢您的回答， 亲切的问候！

Answer 1

不要使用

cols

和

rows

属性，而是尝试使用 CSS

width

和

height

属性

Answer 2

正如已经指出的，您应该使用

width

和

height

来固定区域的大小。行和列将根据浏览器使用的字体大小而变化，并且可能会接受其他解释变化。

Answer 3

不要使用

cols

或

rows

，只需使用 css

width

和

height

。例如这样

textarea {
            width: 100%;
            height: 150px;
            padding: 12px 20px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            background-color: #f8f8f8;
            font-size: 16px;
            resize: none;
          }

保存并在两个浏览器上运行。更重要的是，请使用

ctrl+F5

进行硬刷新或强制重新加载。如果您只按

F5

，它只会刷新，如果您使用

ctrl+F5

，则会显示结果。