Question

IE调整大小问题！？代码非常简单：我有一个div，我想要一个100％DIV的文本框。它必须显示div的红线（如果我使用高度：100％，宽度：100％它会吃掉我的边框:-(）。

HTML：

<div>
    <textarea></textarea>
</div>

的CSS：

div{

    width:500px;
    height:500px; 
    border:solid 1px red;
    padding:1px;
    position:absolute;
    top:100px;
}

textarea{
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
}

我希望你们有一个线索。示例中的DTD是HTML Strict。代码示例：http://jsfiddle.net/QJYuz/

我也试图找到原因。请指定博客/规范的任何链接为什么会出现此问题。

Answer 1

IE不支持同时设置left和right（也不top和bottom）。相反，请尝试将width和height设置为100%（但在这种情况下您需要删除填充和边框）：

textarea{
   position:absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
}

Answer 2

尝试

textarea {
    height: 100%;
    width: 100%;
}

代替。虽然有些浏览器确实同时设置了顶部/底部/左/右全部，但它并不标准。

Answer 3

一种在两者中看起来都很好的方法：http://jsfiddle.net/QJYuz/6/

我对textarea的更改：

textarea{
    position:absolute;
    top:0px;
    left:0px;
    width: 99%;
    height: 98%;
    overflow: auto;
}

我只是将width和height设置为99％和98％。两者看起来都不错，可以保存边框。我还放入overflow: auto以摆脱IE8的丑陋灰色滚动条，直到你实际上需要滚动条。

为什么文本框没有调整到IE中的整个div？ Chrome很好

3 个答案: