дисплей: блок, нарушающий плавающую строку в IE6

#css #menu #cross-browser

#css #меню #кроссбраузерный

Вопрос:

Приведенный ниже код отлично работает в Safari и Firefox, но не в IE6. Это когда я включаю display:block for #horNav li a . Значение float прерывается в IE6. Есть ли способ иметь display:block и не нарушать значение float? Если я включу width для #horNav li , это сработает, но я не хочу указывать для него ширину, поскольку ширина может отличаться.

CSS:

 #horNav{
    margin:0;
    padding:0;
    list-style-type:none;
    border: 0px solid #486B02;
    font-size:13px;
    font-family:Arial;
}
#horNav  li{
    float:left;
}
#horNav  li  a {
    display:block;
    color: #000;
    text-decoration: none;
    height:30px;
    line-height:30px;
    padding:0 40 0 19;
    border:solid 1px blue;
}

HTML:

 <ul id="horNav">
    <li><a>Menu 1</a></li>
    <li><a>Menu 2</a></li>
    <li><a>Menu 3</a></li>
    <li><a>Menu 4</a></li>
</ul>

1. Вы пробовали inline-block ?

2. Вы уверены, что это не другое свойство, которое вмешивается? a{display:block} в li{float:left} был довольно распространенным даже несколько лет назад и должен работать просто отлично. Не могли бы вы создать jsFiddle с проблемой?

Ответ №1:

также добавьте float: left к a . Тогда вам также не понадобится display: block; на a , потому что плавающий элемент автоматически является блоком

Ответ №2:

Попробуйте следующее:

Удалите float:left; для #horNav li и добавьте

#horNav li { отображение: встроенный блок; }

Я думаю, вы можете удалить line-height и height для #horNav li a