0

我正在尝试扩展 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>

这张图片显示了结果。 结果 http://polybemani.net/uploader/files/1/cssboxsizing.png

它在 Chrome 中显示良好，但在 IE9 和 IE10 中没有。我不明白的是，使用完全相同的代码，它在 jsfiddle 中运行良好。是什么赋予了？

4

1 回答 1

0

答案：

添加

<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>
于 2013-03-14T17:28:29.083 回答