0

我以为我们基本上已经过去了这种事情，但我发现了 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>用 a替换<div>（见这里，它的行为方式就是我想要的。

知道为什么吗？

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

4

5 回答 5

3

总是用 定义被替换元素的宽度。是一个被替换的元素。像这样写：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/

于 2013-01-22T07:29:10.280 回答
0

我认为这是错误的 IE 实现 - 他无法对其进行修改。Dat IE。我认为更简单的方法来修复它 - 也设置mwidth为.child。或设置min-width 

.child{
     position:absolute;
     height:30px;
     bottom:2px;
     right:2px;
     left:2px;
     min-width:394px;
}
于 2013-01-22T07:27:18.950 回答
0 
.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/

谢谢你。

于 2013-01-22T07:30:30.790 回答
0

试试这个 .child{ position:absolute; 宽度：97%；高度：30px；底部：2px；左：2px；右：2px；}

于 2013-01-22T07:30:36.703 回答
0

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

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

在你没有工作的例子中，它child是一个textarea（一个inline元素），所以它不会自动拉伸。

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

与未width指定的内联元素相比， 与其他内联元素如spanor q，如果width未设置该属性，则其宽度将等于 0。

于 2013-01-22T07:34:56.933 回答