Контрольная высота <li> в IE 7

У меня есть меню, созданное с тегами <ul> и <li>. Я хочу иметь небольшие разделители между разделами. Для разделителей я просто установил цвет фона и короткую высоту на <li>. Выглядит очень хорошо... кроме IE7, где <li>, похоже, отказывается изменять его высоту, чтобы быть короче, чем все остальные <li> в том же <ul>. Я пробовал разные способы повлиять на высоту разделителя <li> (высота, высота строки, размер шрифта) без успеха.

У меня есть исправление, которое оставит высоту разделителя как есть и окрасит весь фон в IE 7, но это не совсем то, что я хочу (разделитель слишком большой). Может ли кто-нибудь подумать о другом способе управления высотой тега <li>?

Вот пример - в представлении совместимости с переключением IE8 будет отображаться проблема:

<style type="text/css">
.menu {
    width:100px;
}
.menu ul {
    list-style-type:none; 
    border-top: solid 1px red;
    padding: 0px;
    margin:0px;
}
.menu ul li {
    border-bottom: solid 1px red;
    padding: 0px;
    margin:0px;
    white-space:nowrap;
}
.menu ul li a {
    font-size: 13px;
    text-decoration: none;
    color: black;
    display: block;
    padding: 3px;
}
.menu ul li a:hover {
    color: blue;
    text-decoration: underline;
}
.menu ul li.separator {
    height:4px;
    background-color:red;
}

</style>

<div class="menu">
<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li class="separator"></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
  <li><a href="#">Item 6</a></li>
</ul>

</div>

Ответ 1

Проблема заключается в том, что ie6/ie7 будет расширять пустой элемент до высоты вашего шрифта. Вы можете обойти это, добавив font-size:0 и line-height:0 в .menu ul li.separator.

Лучшим решением было бы добавить более толстую нижнюю границу к <li>, которая находится перед разделителем.

.menu ul li.sep {border-bottom-width:6px}

<div class="menu">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li class="sep"><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
  </ul>
</div>

Ответ 2

Установите для css для LI значение display: block;.

Ответ 3

Возможно, вам стоит попробовать установить li следующим образом:

li{
   display:block;
   float:left;
   height:myHeight;
   clear:right;//may be necessary, can't check with IE7
}

Это то, что я сделал с аналогичными проблемами.

Ответ 4

Вы пытались добавить атрибут line-height к .menu ul li?

Вы пытались использовать горизонтальное правило <hr> вместо разделителя? Если вы используете горизонтальное правило, вы можете установить margin-top и margin-bottom на 0px и посмотреть, что произойдет. Невозможно гарантировать, что он выглядит одинаково в IE и других браузерах, но, по крайней мере, вы пробовали. =)

Ответ 5

В дополнение к ответу Daniel A. White вы можете поэкспериментировать с линейной высотой, чтобы центрировать текст по вертикали и создать необходимую высоту.

Ответ 6

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

.selector {
    prop1 : val1; /* default value for all browsers */
    *prop1 : val2; /* only IE will pick this one up and it will override the initial value of prop1. */
}

Это работает намного лучше, чем пытаться сделать специальный комментирование, чтобы включить отдельные таблицы стилей и т.д.