css 100% растянутый стол внутри строки таблицы в IE

Проблема: Растяжка таблицы 100% ширина/высота внутри строки таблицы не работает в IE. Почему ?!css 100% растянутый стол внутри строки таблицы в IE

Вот код (http://jsfiddle.net/GBsay/2/):

HTML:

<body> 
    <div id="row"> 
     <div id="table"> 
      this table should be 100% width/height, green color<br/> 
      It works in ANY browser except IE.<br/> 
      WHY?! 
     </div> 
    </div> 
</body>

CSS:

html, body { 
    position:relative; 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
} 
body { 
    display:table; 
} 
#row { 
    display:table-row; 
    width:100%; 
    height:100%; 
    background:#f00; 
} 
#table { 
    display:table; 
    width:100%; 
    height:100%; 
    background:#0f0; 
}

Этот код работает во всех браузерах, кроме IE (7,8,9,10) , Кто-нибудь знает, как исправить это, используя только css?

источник

2013-07-11 Julius Loa

IE, какая версия? – falguni

Протестировано в 7,8,9,10 - не работает. Таким образом, в IE он вообще не работает. –

Если кто-то другой сталкивается с этим, у меня есть точно такая же проблема, и я решил это, установив минимальную высоту (может быть что угодно, 1px) в родительском div (тот, у которого есть display: table). – Lorentz

Чудесная красота Internet Explorer, является испытанием терпения для многих разработчиков, однако решение заключается в следующем


html, body { 
    position:relative; 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
} 
#table { 
    position: relative; 
    display:table; 
    width:100%; 
    height:100%; 
    background:lightgreen; 
} 

body { 

} 
#row { 
    width:100%; 
    height:100%; 
    position: static; 
    display:block; 
    background:lightblue; 
    text-align:center; 
    float: center; 
    top:100%; 
}

источник

2013-07-11 15:40:37

И так? Вы попробовали свое решение? Он не работает вообще: D –

Это обновление. Вы должны объявить DOCTYPE –

css 100% растянутый стол внутри строки таблицы в IE

ответ

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