IE7 создает пустые текстовые заметки между плавающими элементами - PullRequest
0 голосов
/ 23 ноября 2011

Я работаю над вещами вроде нумерации страниц, которые являются просто набором плавающих якорных тегов внутри div.Теперь в IE7 он вставляет пустые текстовые узлы тут и там, казалось бы, наугад, что нарушает компоновку.

Результат: Example of how it looks on different pages. Note the empty text nodes.

Пример того, каквыглядит на разных страницах.Обратите внимание на пустые текстовые узлы.Отлично, да?

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>

1 Ответ

0 голосов
/ 23 ноября 2011

Это может быть вызвано переносом строки в вашем коде.

Раздень их и посмотри, все ли еще так.

...