CSS для отображения неупорядоченного списка по горизонтали в IE 6 и 7 - PullRequest
Новая
       9

CSS для отображения неупорядоченного списка по горизонтали в IE 6 и 7

1 голос
/ 24 августа 2009

Я создал шаблон для WebSVN ( посмотрите его в действии здесь ) и приложил немало усилий, чтобы он использовал веб-стандарты и проверял. Он выглядит великолепно в большинстве браузеров, но, как я и опасался, IE 6 и IE 7 не могут его взломать. В моем случае проблема в том, что они отказываются отображать неупорядоченный список для моей навигации по горизонтали - они оба отображают каждый <li> в отдельной строке и переполняют выделенное вертикальное пространство. (IE 8 ведет себя корректно и выглядит очень близко к Firefox и Safari, что стало приятным сюрпризом.)

Мне не удалось найти подходящее решение в Google или SO. Я бы предпочел CSS-исправление, а не JavaScript или что-то подобное, хотя это не совсем так. (Кроме того, меня не волнует проблема прозрачности PNG в IE 6 - она ​​совершенно не ухудшает читабельность, и IE 7 и 8 отлично справляются с ней.)

Редактировать: Вот соответствующие фрагменты HTML и CSS:

HTML 

<ul id="links">
  <li class="diff"><a href="comp.php?repname=BYU+CocoaHeads&amp;compare[]=%2F@552&amp;compare[]=%2F@553">Compare with Previous</a></li>
  <li class="rev"><a href="revision.php?repname=BYU+CocoaHeads&amp;">Changes</a></li>
  <li class="log"><a href="log.php?repname=BYU+CocoaHeads&amp;path=%2F&amp;&amp;isdir=1">View Log</a></li>
  <li class="download"><a href="dl.php?repname=BYU+CocoaHeads&amp;path=%2F&amp;isdir=1" rel="nofollow">Download</a></li>
  <li class="svn"><a href="http://dysart.cs.byu.edu/chsvn/">SVN</a></li>
  <li class="rss"><a href="rss.php?repname=BYU+CocoaHeads&amp;path=%2F&amp;isdir=1">RSS feed</a></li>
</ul>

CSS 

#links {
    padding: 0;
    margin: 0;
    text-align: center;
    background: url(images/bg-gray-light.png) repeat-x 0 top;
    border-bottom: solid 1px #a1a5a9;
}

#links li {
    font-size: 110%;
    display: inline-block;
    padding: 5px 5px 4px;
    white-space: nowrap;
}

Редактировать: Теперь, когда я нашел решение, связанная страница больше не будет (не должна?) Вести себя неправильно в этой ситуации, но будет по-прежнему общедоступна.

Ответы [ 3 ]

2 голосов
/ 24 августа 2009

Оказывается, что IE 6 и 7 не реализуют inline-block, как ожидалось. Похоже, что я нашел хорошее решение, хотя ... Использование следующего CSS работает для этих браузеров и сохраняет правильное форматирование в новых браузерах: 

#links {
    padding: 0 0 4px;
    margin: 0;
    text-align: center;
    background: url(images/bg-gray-light.png) repeat-x 0 top;
    border-bottom: solid 1px #a1a5a9;
}

#links li {
    font-size: 110%;
    display: inline-block;
    padding: 5px 5px 0;
    white-space: nowrap;
}

* html #links li {
    display: inline;
}

Я презираю IE хаки .... Я настоятельно рекомендую включить Pushup в мой шаблон.

0 голосов
/ 24 августа 2009

У меня отлично работает в IE8 с режимом совместимости.

Единственная потенциальная проблема, которую я вижу, это то, что вы не указываете поля в элементах списка. Попробуйте установить margin:0 и посмотрите, поможет ли это.

0 голосов
/ 24 августа 2009

Назначение float:left элементам li должно работать, IIRC.

...