Firefox 文本区域大小错误？答案

【问题标题】：Firefox textarea sizing bug?Firefox 文本区域大小错误？
【发布时间】：2013-04-18 21:40:44
【问题描述】：

我正在尝试创建一个固定的文本区域，仅使用 CSS 填充浏览器窗口的整个宽度和高度，以下内容在 Chrome 中完美运行：

textarea {
    border: 2px solid #3D6AA2;
    padding: 5px;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    resize: none;
}

http://jsfiddle.net/BulletzBill/FZr9k/1/

但是，如果您在 Firefox 中查看小提琴，它似乎根本没有考虑 bottom 或 right 规则。这是 Firefox 中的一个已知错误，还是有任何解决方法？如果可能的话，我想避免使用 javascript/window resize listeners。

【问题讨论】：

好吧想通了。有趣，但这是正确的行为，Chrome 在这种情况下无法正常工作。检查此answer 和spec。
嗯，很有趣。我想我只是习惯于将 webkit 的实现视为福音，以至于我什至不认为是它做错了。 :)

标签： css firefox textarea dimensions

【解决方案1】：

这是您的 jsfiddle 的更新

您需要制作width:100%、height:100% 和box-sizing: border-box;

你只需要top和left两个定位点

【讨论】：

走这条路的问题是文本区域会被切断，尤其是当你想在上面使用填充/边框时。查看小提琴的此更新以了解我的意思：jsfiddle.net/BulletzBill/FZr9k/6。将 top/right/bottom/left 值全部设置为零适用于其他块级元素，例如 firefox 中的<div>s，这就是为什么它对我来说似乎是一个错误。
@BillDami Just use box-sizing jsfiddle.net/FZr9k/8 但是有趣的是为什么 Mozilla 不拉伸 textarea。
看起来像这样，因为宽度是 100% + 4px，因为每边都有 2px 的边框。只需删除边框，或者如果您需要边框，则必须将其放在另一个 div 中
@Andrew 是的，但我仍然希望在 textarea 上有填充，以防止文本直接靠在 chrome 中的滚动条上，这也增加了高度。看起来box-sizing 会处理这个问题，尽管正如 dfsq 所建议的那样。如果您可以将其添加到您的答案中，我会将其标记为已接受。 :)
@BillDami 我已经更新了我的答案，以便它转到最新的 jsfiddle，以便人们更容易找到并且还提到了box-sizing