#html #css #internet-explorer
#HTML #css #internet-explorer
Вопрос:
Привет, сообщество StackOverflow, я столкнулся с проблемой, которая, откровенно говоря, ставит меня в тупик, и я удивлен, что не столкнулся с этой проблемой раньше.
Прошу прощения, если я упустил из виду что-то простое — я безрезультатно провел обширные поиски в Google и StackOverflow.
Моя проблема в том, что при применении дополнения к Div контейнер растягивается на указанную величину заполнения в Firefox / Chrome, но не в IE. Я видел предложения по добавлению «display: inline;» или «display: inline-block;» для устранения проблемы, но это имеет эффект для меня.
Вот визуализированный пример: 
И код для этого примера:
<html>
<head>
<style type="text/css">
#div1 {
background-color:black;
width:400px;
height:300px;
padding-top:10px;
}
#div2 {
background-color:red;
width:400px;
height:280px;
padding-top:10px;
}
#div3 {
background-color:blue;
width:400px;
height:260px;
padding-top:10px;
}
#div4 {
background-color:green;
width:400px;
height:200px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
<div id="div4">
</div>
</body>
</html>
Чего мне не хватает? Любая помощь будет оценена.
Спасибо.
Ответ №1:
A <!DOCTYPE ... > — это то, чего вам не хватает. IE выполняет рендеринг в режиме Quirks, где модель коробки является рамкой, а не содержимым.
Комментарии:
1. Большое вам спасибо. Я думал, что это могло быть проблемой ранее, но когда я тестировал его, я, должно быть, выбрал неправильный doctype или, возможно, он был обнаружен в кэше. Несмотря на то, что я так благодарен, я уверен, что вы сэкономили часы головной боли. Спасибо, Колинк!