"height = 100%" не работает в IE9

У меня есть HTML, определенный как этот."height = 100%" не работает в IE9

<div class="a"> 
    <div class="b" > 
     something 
    </div> 
    <div class="c" > 
     <div class="d"> 
     </div> 
    </div> 
</div>

И стиль CSS определяется как:

html,body 
{ 
    height:100%; 
    width:100%; 
} 
.a 
{ 
    display:table; 
    height: 100%; 
    width: 99%; 
    background: green; 
    padding-top: 10px; 
    float: left; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.b 
{ 
    background: yellow; 
    display:table-row; 
    padding-bottom: 10pt; 
    margin-left: 5pt; 
    float: left; 

} 
.c 
{ 
    background: pink; 
    display:table-row; 
    height:100%; 
    width: 100%; 
} 

.d 
{ 
    display: block; 
    width: 100%; 
    height: 100%; 
    float: left; 
}

В Firefox, Safari, Chrome, в DIV с классом "г" имеет такую же высоту, с его родителем сНу элемента. Но в IE9 высота div с классом «d» равна 0. Кто-нибудь знает причину.

Вот ссылка из выше тестового кода http://jsfiddle.net/ZDY4P/19/

источник

2013-07-02 wyfeizj

Большинство вещей в IE9 не соответствуют стандартам. Я думаю, что Microsoft делает это специально для предотвращения насыщения рынка веб-разработчиками. – paddy

IE, вероятно, не обрабатывает элемент блока внутри div, определенного как строка таблицы, так же, как и другие браузеры, которые не являются «строгими» и не соответствуют стандартам Microsoft. –

В IE блок не работает с элементами таблицы, установив процент – texasbruce

Удалить свойство поплавок в .d. И используйте таблицу для .d внутри дисплея: таблица-строка, которая .c обозначает. Работает в IE9:

http://jsfiddle.net/ZDY4P/45/

.d 
{ 
    background: orange; /* added a marker color */ 
    display: table-cell; 
    width: 100%; /* or 50% or auto for multiple columns... */ 
    height: 100%; 
}

Если вы находитесь в необходимости иметь несколько столбцов высоты 100% внутри .c, добавить несколько D's, как показано на jsfiddle.

К чести в IE9: У меня нет списка, какой вид отображения вложений позволены, но гнездование display:block; float: left внутри display:table-row, может быть, несколько недействителен, говоря старый HTML:

<table> 
    <tr> 
    <div> <!-- expected: a <td> --> 
     ..

источник

2015-08-18 12:29:00

"height = 100%" не работает в IE9

ответ

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