css - 将 textarea 置于 div 底部并填充至(宽度 - 2px 边距)

Question

我以为我们已经基本解决了这类问题，但我发现 Firefox 和 IE 与 Chrome 的显示方式存在不一致(想必所有 CSS 半神都知道)。

在这里看看这个 jsfiddle:http://jsfiddle.net/smithkl42/jmgEV/1/

div.parent{
  position:relative;
  height:200px;
  width:400px;
  background-color:blue;
}

textarea.child{
  position:absolute;
  height:30px;
  bottom:2px;
  left:2px;
  right:2px;
}

在 Chrome 中它做我想做的，即显示 <textarea>在其父 div 的底部，并且与父 div 一样宽。但在 FireFox 和 IE 中，它会忽略 right:2px线，并只给它默认的宽度。

如果我替换 <textarea>用<div> (参见 here ，它的行为符合我的要求。

知道为什么吗？

编辑:感谢所有的建议。我应该注意到父元素(在现实世界中，而不是在我的 fiddle 中)会改变大小，所以我不能使用任何“只需手动设置宽度”的建议。例如，无论其父元素是 1200 像素宽还是 50 像素宽，我都需要它距离左右边缘 正好 两个像素。因此，将它设置为 % 之类的东西，如果是主要是固定宽度，在这里不起作用。有关其他评论，请参见下文。

Answer 1

始终将宽度定义为replaced带有 position:absolute 的元素. <textarea>是一个被替换的元素。像这样写:

HTML

<div class="parent">
    <div class="child">
        <textarea></textarea>
    </div>
</div>

CSS

.parent{
    position:relative;
    height:200px;
    width:400px;
    background-color:blue;
}

.child{
    position:absolute;
    bottom:2px;
    left:2px;
    right:2px;
}
.child textarea{
    width:100%;
    height:30px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

检查这个http://jsfiddle.net/jmgEV/10/