Doctype и секции

я бегу в это, и я не знаю, почему это происходит ...Doctype и секции

Принимая 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>

источник

2012-04-17 DimC

Ваши section s имеют в основном не высоты, потому что height приведены в процентах (height: 15%;) всегда будет relative to the parent's height. body имеет нулевую высоту в вашем случае, а 15% от нее все равно ноль.

Это должно помочь:

html, body { height: 100%; }

jsFiddle Demo

Обязательно ВСЕГДА включать доктайп.

источник

2012-04-17 07:39:13 kapa

Да, это очень помогает. Я не думал, что это может привести к проблемам, большое спасибо! – DimC

Вы сказали это достаточно четко, но для повторения этого вопроса проблема не *, потому что 'positon' был установлен как относительный, а потому, что высота была установлена в процентах. Установка высоты на 15 пикселей также расширила бы разделы (как это верно для любого элемента блока). Кроме того, установка элемента html или элемента body сама по себе не устраняет проблему (по крайней мере, не в хроме). Оба должны быть установлены (что было для меня неожиданностью). Вы можете (если вы так склонны) заменить 'html' на новый': root', но 'body' по-прежнему будет иметь высоту. – Anthony

Для того, чтобы сделать IE стилей HTML5 (section, nav ...), вы должны использовать polyfill, потому что по умолчанию он не может быть установлен. Вы можете использовать: http://code.google.com/p/html5shiv/

Это просто файл JS, который вы должны включить в ваш HTML (с помощью IE условные комментарии):

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

Кроме того, вы не должны использовать одиночные кавычки:

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

Кроме того, конечно, если вы устанавливаете высоту porcentual на своих элементах section, его родитель должен иметь определенную высоту. На вашем случае 15% высоты ничего (body не имеет высоты) - это ... ничего.

источник

2012-04-17 07:39:36

Одиночные кавычки в HTML5. Также он говорит, что его проблема появляется в IE9. – kapa

Он говорит, что он вообще не работает в IE9 (из-за проблемы с высотой). В других браузерах (возможно, в других IE) это не работает при добавлении doctype (материал HTML5 shiv). –

Хуан, большое спасибо за ваш ответ. Ответ Бажмегакапы решил мою проблему, но я обязательно проверю полипол. – DimC

Doctype и секции

ответ

Смежные вопросы