Question

我正在尝试扩展textarea以适应其父div的100％，但我在IE9中遇到问题。以下是整个页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    #wrap {
        width: 50%;
        height: 100px;
        background:#fee; border:3px double #f99;
    }

    textarea {
        background:#efe;
        width: 100%;
        height: 100%;
        padding: 10px;
        border:0; margin:0;
        box-sizing:border-box;
        overflow: auto;
        display: block;    
    }
    </style>
</head>
<body>
    <div id="wrap"><textarea>hello world</textarea></div>
</body>
</html>

此图像显示结果。 result http://polybemani.net/uploader/files/1/cssboxsizing.png

它显示在Chrome中很好，但在IE9和IE10中没有。我不明白的是，使用完全相同的代码，它在jsfiddle中工作正常。是什么给了什么？

Answer 1

答案：

添加

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

到head标签修复了问题。显然，IE处于怪癖模式。你学的越多！

希望这有助于下一个人遇到这个问题！

完整来源：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title></title>
    <style type="text/css">
        #wrap {
            width: 50%;
            height: 100px;
            background:#fee;
            border: 3px solid red;
        }

        textarea {
            background:#efe;
            padding: 10px;
            border:0; 
            margin:0;
            box-sizing:border-box;
            overflow: auto;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="wrap"><textarea>hello world</textarea></div>
</body>
</html>

即使使用盒子大小调整，Textarea也会溢出div：border-box

1 个答案: