Я работаю над вещами вроде нумерации страниц, которые являются просто набором плавающих якорных тегов внутри div.Теперь в IE7 он вставляет пустые текстовые узлы тут и там, казалось бы, наугад, что нарушает компоновку.
Результат:
Пример того, каквыглядит на разных страницах.Обратите внимание на пустые текстовые узлы.Отлично, да?
CSS:
.nwsPaging {
width:200px; /* Have also tried fluid size */
height:30px;
display:block; }
.nwsPaging a {
width:auto; /* Have also tried fixed size */
margin:0 0 0 1px;
padding:2px 8px;
border:solid 1px #ccc;
background:#eee;
float:left;
line-height:20px;
display:block;
zoom:1;
vertical-align:top; /* Should not do any difference */ }
.nwsPaging a:hover, .nwsPaging .isActive {
background:#D150A1;
color:#fff;
display:block; /* Should be redundant, but just in case */
zoom:1; }
Как вы можете видеть, я пробовал несколько разных вещей, включая установку фиксированной ширины для контейнера иfloat -tags, плюс, давая ему hasLayout.В классе .isActive нет ничего особенного, и не имеет значения, если я никогда не добавлю этот класс.
У меня была точно такая же проблема в другой системе, однако я не могу вспомнить, как я ее исправил.У меня нет доступа к коду, и инспектор не помогает.
Информация о бонусе: сайт построен на HTML5Boilerplate, который использует normalize reset CSS .
Редактировать: Разметка очень проста, и хотя теги создаются динамически, не должно быть разрывов строк, которые могли бы создать пустые текстовые узлы.
Как разметка должна быть представлена какпроанализировано:
<div class="nwsPaging clearfix">
<a href="foo">Previous</a>
<a href="bar">1</a>
<a href="bar" class="isActive">2</a>
<a href="bar">3</a>
<a href="baz">Next</a>
</div>