Как исправить проблемы с плавающей точкой в ​​IE6 и IE7?

Question

Я имею в виду ссылки навигации «Предыдущая» и «Следующая» под статьями на моем веб-сайте, которые выглядят так (ниже) во всех современных браузерах (IE> 7)

Но в IE6 и IE7 это выглядит так

Да, остальная часть моего веб-сайта также выглядит очень хорошо в этих браузерах, и я хочу, чтобы это работало, и ничего не ломалось. Я вижу, что IE6 и IE7 могут иметь проблемы с плавающей точкой, и что есть также исправление (работающее, я не смог найти).

Это HTML-код, относящийся к почтовой навигации (упомянутый выше):

<div class="post-entries">
<div class="nav-prev fl"><a href="http://example.com/2011/01/01/post-1/" rel="prev"><span class="meta-nav">?</span> LG's A530 3D Notebook Shoots And Plays In 3D [PICS]</a></div>
<div class="nav-next fr"><a href="http://example.com/2011/01/01/post-2/" rel="next">LG's Mouse Scanner Saves Scanned Material To Image, PDF or DOC <span class="meta-nav">?</span></a></div>
<div class="fix"></div>
</div>

и вот код CSS, относящийся к вышеуказанному:

.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
.post-entries a:link, .post-entries a:visited { font-size:0.9em; color:#888; }

.fl{float: left;}
.fr{float: right;}

.fix{clear: both;height: 1px;margin: -1px 0 0;overflow: hidden;}

Надеюсь, мне ясно. Может ли кто-нибудь помочь мне с этим?

Answer 1

Как насчет этого?Добавлено css:

/*.post-entries{float:left;width:600px}*/
.nav-prev,.nev-next{display:block;width:100%}

Обновлена ​​скрипка: http://jsfiddle.net/y3MBC/14/

Answer 2

Спасибо @ marissa.c за помощь, это ответ ...

изменить эту строку:

.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }

его:

.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; height: 100%; }

А затем добавьте эту строку:

.nav-prev, .nev-next { display:block; width:100%; }

И это исправляет проблемы с плавающей точкой. Теперь он работает даже в IE6, все заслуги @ marissa.c

Answer 3

Похоже, вы не указали ширину для div. Попробуйте это:

.fl{float: left; width: 100%}
.fr{float: right; width: 100%}

Также, если вы планируете использовать margin / padding, добавьте display: inline к вашим плавающим элементам, чтобы старый IE не удваивал величину поля / padding.

Answer 4

Я думаю, что если вы просто добавите <div style="clear:left;></div> между двумя div, это отформатирует так, как вы хотите. Я протестировал его в ie7, но у меня нет эффективного способа тестирования для ie6. Вот обновленная скрипка: http://jsfiddle.net/D3Jja/