Разрыв между элементами списка с плавающими элементами в IE7 (с изолированным тестовым примером)

Question

У меня огромные трудности в устранении пропуска между элементами списка в IE7 .

Проблема с пропуском между элементами списка возникает, когда я плаваю элементы внутри li:s.

Здесь приведен простой тестовый пример (с 2 различными возможными решениями, которые не сработали): http://jsfiddle.net/UJMr8/1/

... А вот HTML-код из теста:

<ul>
    <li class="even">
        <span class="left">left</span>
        <span class="right">right</span>
    </li>
    <li class="odd">
        <span class="left">left</span>
        <span class="right">right</span>
    </li>
    <li class="even">
        <span class="left">left</span>
        <span class="right">right</span>
    </li>
    <li class="odd">
        <span class="left">left</span>
        <span class="right">right</span>
    </li>
</ul>

Со следующим css:

li     { height: 30px; line-height: 30px; padding: 0 10px; }
.even  { background: #ccc; }
.odd   { background: #eee; }
.left  { float: left; }
.right { float: right; }

Есть предложения или мысли по этому поводу?Спасибо!

Answer 1

Редактировать: Спасибо за комментарий, я не тестировал его в других браузерах.Таким образом, вы можете использовать условные комментарии для таргетинга на Internet Explorer только таким образом:

<!--[if IE 7 ]>
 li {height:0px;}
<![endif]-->

. Или вы можете использовать внешний CSS для таргетинга на Internet Explorer 7 для любой другой проблемы, которая может у вас возникнуть и вы не можете найтикросс-браузерное решение:

<!--[if IE 7 ]>
<link type="text/css" rel="stylesheet" href="ie7.css"/>
<![endif]-->

Другой вариант - использовать взломщик Internet Explorer, например звездочку *.Например,

*height:0px;

Чтобы взломать его, хак должен быть ниже height:30px.

Я предлагаю вам использовать условные комментарии вместо взлома.

Answer 2

У вас будет много проблем со стилем элементов списка, если вы не измените их отображение, чтобы заблокировать и сбросить их должным образом.

Добавьте это в начало вашего css:

ul li, ul {
  list-style:None;
  margin:0;
  padding: 0;
  display:block;
}

Answer 3

Вы пытались использовать Eric Meyers CSS Reset?

http://www.cssreset.com/downloads/css-resets/eric-meyer-reset-css/eric-meyer-reset.css

Устанавливает для всех полей браузера по умолчанию и отступы 0