Css 将textarea放置在div底部并填充到（宽度-2倍边距）

我原以为我们基本上已经过了这一关，但我发现了Firefox和IE与Chrome在显示内容方面的不一致性（大概大家都知道CSS半神）

在这里看一下这个JSFIDLE：

在Chrome中，它做了我希望它做的事情，即在其父div的底部显示

，并与父div一样宽。但在FireFox和IE中，它忽略了

right:2px

行，只给出了默认宽度

如果我将

替换为

（请参阅，它的行为符合我的要求）

知道为什么吗

编辑：

---

感谢所有的建议。我应该注意到父元素（在现实世界中，而不是在我的小提琴中）将改变大小，所以我不能使用任何说“手动设置宽度”的建议例如，无论父元素的宽度是1200像素还是50像素，我都需要从左边缘和右边缘正好有两个像素。因此，将其设置为%这样的事情在这里不起作用，如果大多数情况下是固定宽度的话，则会起作用。有关其他注释，请参见下文。

我认为这是IE的错误实现-他无法对其进行剪切。Dat IE.I think更简单的修复方法-也将

mwidth

设置为

.child

或设置

min width

.child{
     position:absolute;
     height:30px;
     bottom:2px;
     right:2px;
     left:2px;
     min-width:394px;
}

---

我认为这是IE的错误实现——他不能把它弄坏。Dat IE。我认为更容易解决它——将

mwidth

设置为

。child

也设置为

min width

.child{
     position:absolute;
     height:30px;
     bottom:2px;
     right:2px;
     left:2px;
     min-width:394px;
}

---

始终将宽度定义为

位置为绝对的元素
为替换元素。如下所示：

HTML

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

选中此项
始终使用
位置定义元素的宽度：绝对
是替换元素。如下所示：

HTML

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

选中此项
。父项{
位置：相对位置；
高度：200px；
宽度：400px；
背景颜色：蓝色；
}
.孩子{
位置：绝对位置；
高度：30px；
底部：2px；
左：2px；
右：2px；
}

嗨，
我希望这对你有帮助。
演示：

谢谢。
。家长{
位置：相对位置；
高度：200px；
宽度：400px；
背景颜色：蓝色；
}
.孩子{
位置：绝对位置；
高度：30px；
底部：2px；
左：2px；
右：2px；
}

嗨，
我希望这对你有帮助。
演示：

谢谢。
试试这个。孩子{位置：绝对；宽度：97%；高度：30px；底部：2px；左：2px；右：2px；}
试试这个。孩子{位置：绝对；宽度：97%；高度：30px；底部：2px；左：2px；右：2px；}文本区
是一个
内联
元素，
div
元素是一个
块
元素

在您的工作示例中，
.child
是一个
div
（一个
块
元素），因此它水平拉伸以适合其父元素

在无工作示例中，
子项
是一个
文本区域
（一个
内联
元素），因此它不会自动拉伸

另一个原因是
textarea
元素的默认宽度。此元素有一个名为
cols
的属性，该属性决定
textarea
的长度，以字符计算。此属性的默认值为
20
，因此如果不指定
width
属性的值，您的
文本区域
将应用此默认值

与未指定
宽度的内联元素进行比较
对于其他内联元素，如
span
或
q
，如果未设置
width
属性，则其宽度将等于零。
textarea
是
内联
元素，
div
元素是
块
元素

在您的工作示例中，
.child
是一个
div
（一个
块
元素），因此它水平拉伸以适合其父元素

在无工作示例中，
子项
是一个
文本区域
（一个
内联
元素），因此它不会自动拉伸

另一个原因是
textarea
元素的默认宽度。此元素有一个名为
cols
的属性，该属性决定
textarea
的长度，以字符计算。此属性的默认值为
20
，因此如果不指定
width
属性的值，您的
文本区域
将应用此默认值

与未指定
宽度的内联元素进行比较
对于其他内联元素，如
span
或
q
，如果未设置
width
属性，它的宽度将等于零。
我不确定技术原因。实际上，我在前面放了一段时间来说明某些元素对绝对定位的响应。
IFRAME
，
TABLE
，
 选择
，则
TEXTAREA
元素的行为与其他元素不同。我找到的最佳解决方案是在元素周围添加一个
DIV
，为该
DIV
指定所需的尺寸，然后使问题元素
宽度：100%；高度：100%；
：只需为子TEXTAREA指定宽度%。。（例如100%或96%）@第三个-是的，这是我找到的唯一解决方案。在FF和Chrome中它的工作方式不同，这真是太奇怪了。我认为他们已经解决了CSS规范中的所有错误。我不确定技术原因。我实际上在前一段时间收集了一些元素对绝对定位的响应。
IFRAME
、
TABLE
、
SELECT
、和
TEXTAREA
元素的行为与其他元素不同。我发现的最佳解决方案是在元素周围添加一个
DIV
，为该
DIV
提供所需的维度，然后使问题元素.parent{
position:relative;
height:200px;
width:400px;
background-color:blue;
}

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

<div class="parent">
<textarea class="child" cols="47" style=" resize: none;"></textarea>
</div>