IE сводит меня с ума - еще раз. В реальном приложении я хочу иметь изображение слева, несколько ссылок справа и стандартный текст между ними. В приведенном ниже примере всего 3 делителя внутри другого, но этого достаточно, чтобы показать проблему.
Пример имеет 2 раза одинаковую конструкцию. Один раз голый, один раз заключенный в список. Firefox показывает
|Left text|Center text<-->|Right text|
, список с отступом, но в целом тот же.
IE8 показывает то же самое для голой конструкции. Но для инкапсулированного кода все идет наперекосяк:
|Left text|<-->|Right text|
|Center text<--> |
с верхним зазором, являющимся желтым, то есть содержащим делением.
Поскольку поведение CSS не всегда интуитивно понятно, я хотел бы знать, не противоречит ли мой код ниже каким-либо стандартам. И если он в достаточной степени соответствует, есть ли способ помочь IE8 отобразить его как задумано?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float Test for IE</title>
<style>
.meta-left {
float: left;
background-color: red;
}
.meta-right {
float: right;
background-color: blue;
}
.meta {
background-color: green;
}
.meta-container {
background-color: yellow;
}
ol {
clear: both;
list-style: none;
}
p {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="meta-container">
<div class="meta-left">
<p>Left text</p>
</div>
<div class="meta-right">
<p>Right text</p>
</div>
<div class="meta">
<p>Center text</p>
</div>
</div>
<ol><li>
<div class="meta-container">
<div class="meta-left">
<p>Left text</p>
</div>
<div class="meta-right">
<p>Right text</p>
</div>
<div class="meta">
<p>Center text</p>
</div>
</div>
</li></ol>
</body>
</html>