Question

我认为我们已经过去了这种事情，但是我发现Firefox和IE显示的东西与Chrome有什么不一致（可能是所有CSS半神都知道的）。< / p>

在这里看看这个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中，它可以实现我想要的功能，即在父div的底部显示<textarea>，并且与父div一样宽。但是在FireFox和IE中，它会忽略right:2px行，只是给它默认的宽度。

如果我将<textarea>替换为<div>（请参阅here，它会按照我想要的方式行事。

知道为什么吗？

编辑：感谢所有的建议。我应该注意，父元素（在现实世界中，而不是在我的小提琴中）将会改变大小，所以我不能使用任何建议，＆＃34;只需手动设置宽度＆＃34 ;。例如，我需要它是完全左边和右边两个像素，无论它的父元素是1200像素宽还是50个。所以比如把它设置为％，这样就可以了大多数固定宽度，在这里工作。有关其他意见，请参阅下文。

Answer 1

始终使用position:absolute为replaced元素定义宽度。 <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/

Answer 2

我认为这是IE的错误实现 - 他无法延伸它.Dat IE。我认为更容易修复它 - 将mwidth设置为.child。或者设置min-width

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

Answer 3

.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>

您好，我希望这能帮到您。演示：http://jsfiddle.net/jmgEV/8/

谢谢。

Answer 4

试试这个.child {position：absolute;宽度：97％;高度：30PX;底部：2px的;左：2px的;右：2px的; }

Answer 5

textarea是inline元素，div元素是block元素。

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

在没有工作的示例中，child是textarea（inline元素），因此不会自动展开。

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

与未指定width的内联元素进行比较 使用其他内联元素（如span或q），如果未设置width属性，则宽度将等于零。

将textarea放在div的底部并填充到（宽度 - 2px边距）

5 个答案: