2

私はこれに出くわしましたが、なぜそれが起こっているのかわかりません...

以下の html を例にとると、このままでは CSS の指示に従って、セクションのグレーの領域が表示されます。しかし、<!Doctype html>最初の行に含めると壊れてしまいます..さらに、以下のコードはIE9ではまったく機能しません..なぜですか? よろしくお願いします。

<html>
<head>

<style type="text/css">
.sec_class{
        width:50%;
        height:15%;
        border:1px black solid;
        padding:0px;
        position:relative;
        background-color:grey;
}
    </style>
</head>

<body>

<section class = 'sec_class'></section>
<section class = 'sec_class'></section>
<section class = 'sec_class'></section>

</body>
</html>
4

2 に答える 2

3

パーセンテージ ( ) で指定された値は、常に親の高さに対して相対的sectionであるため、基本的に高さはありません。あなたの場合、高さはゼロですが、その15％はまだゼロです。heightheight: 15%;body

これは役立つはずです：

html, body { height: 100%; }​

jsFiddle デモ

常に doctype を含めるようにしてください。

于 2012-04-17T07:39:13.793 に答える
1

IE スタイルの HTML5 タグ ( section、nav...) を作成するには、既定では使用できないため、ポリフィルを使用する必要があります。使用できます: http://code.google.com/p/html5shiv/

これは、HTML に含める必要がある単なる JS ファイルです (IE 条件付きコメントを使用):

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

また、一重引用符を使用しないでください。

<section class="sec_class"></section>

また、もちろん、section要素にポーセンチュアルの高さを設定している場合、その親にも高さが定義されている必要があります。あなたの場合、何もない (高さがないbody) 15% の高さは… 何もありません。

于 2012-04-17T07:39:36.107 に答える