0

親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">

ヘッドタグに問題を修正しました。どうやら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 に答える