ie8 забавно играет с list-style-position: внутри

Ok,

Итак, проблема здесь... при использовании list-style-position:inside в IE8 первый лайк имеет отступ, а каждая последующая строка - нет. Таким образом, новые строки появляются под маркером.

Это нормально, но когда я использую список с этим css, примененным с тегом a внутри li, текст автоматически переносится на вторую строку, а первая строка пуста.

ошибка ie8 http://www.rocketspark.co.nz/bug_images/ie8_list.png< /а>

Когда я удаляю тег a из li, он возвращается обратно.

Любая идея о том, почему это может быть, или это ошибка в мире ie8, или мне просто нужно дважды проверить мой css?

Любые идеи будут высоко оценены.

Как было задано, вот некоторый код

<div id="sub_nav">
<ul>
...    
<li><a class="active_page" href="#">Liposculpture</a>
<ul>
<li><a href="#">What is Liposculpture?</a></li>
<li><a href="#">About Liposculpture surgery</a></li>
<li><a href="#" class="active_sub">After Liposculpture surgery</a></li>
<li><a href="#">Post Op Instructions</a></li>
<li><a href="#">Liposculpture Side Effects</a></li>
<li><a href="#">Liposuction Introduction to</a></li>
<li><a href="#">Tumescent Liposculpture</a></li>
</ul>
</li>
...
</ul>
</div>

Что касается CSS, я постараюсь показать его как можно лучше.

#sub_nav li {
    width: 200px;
    padding:4px 0;
    border-bottom: 1px #CCC solid;
}

#sub_nav li a {
    text-decoration: none;
    color:#555;
    padding:7px 15px 7px 15px;
    display: block;
}

#sub_nav li ul li {
    list-style-position: inside;
    list-style-type: disc;
    font: 11px Arial;
    padding-left:15px;
    color:#FFF;
    border-bottom: none;
}

#sub_nav li ul li a {
    padding:0;
    margin:0;
    text-indent: 0;
}

Надеюсь это поможет


css internet-explorer-8
person LeeR    schedule 10.05.2010    source источник
comment
Мммм... похоже, у IE8 возникают проблемы при вычислении ширины a (отображаемой в виде блока) и перемещении ее на новую строку. Первое, что я бы попробовал, это добавить ширину к элементу a, чтобы увидеть, не в этом ли проблема. Есть ли какой-нибудь URL-адрес, чтобы увидеть проблему (хорошо, я мог бы создать его с вашим кодом, но мне лень; D)   -  person salgiza    schedule 12.05.2010
comment
Кажется, вы действительно были правы! Не могу поверить, что не заметил этого раньше. Это действительно был блок дисплея, который влиял на это. Я изменил ширину и сделал ее меньше, но не решил проблему. Поэтому я просто установил display:inline (должен быть унаследован блок). Спасибо за это!   -  person LeeR    schedule 13.05.2010
comment
У @salgiza была такая же проблема, и ваш ответ помог. Спасибо. Вам следует рассмотреть возможность предоставления реального ответа ниже вместо комментария, чтобы ОП мог его принять.   -  person jonjbar    schedule 24.08.2011
comment
Попробуйте это: stackoverflow.com/questions/ 9110646/   -  person pwelti    schedule 16.07.2013

Ответы (2)


arrow_upward
3
arrow_downward

изменять

#sub_nav li a {
    text-decoration: none;
    color:#555;
    padding:7px 15px 7px 15px;
    display: block;
}

to

#sub_nav li a {
    text-decoration: none;
    color:#555;
    padding:7px 15px 7px 15px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
person isour 2.0    schedule 08.07.2012

arrow_upward
0
arrow_downward

@salgiza опубликовал ответ в комментариях выше... «Похоже, у IE8 возникают проблемы при вычислении ширины «а» (отображаемой в виде блока) и перемещении ее на новую строку. Первое, что я бы попробовал, это добавить ширину к элементу «a», чтобы увидеть, не в этом ли проблема».

person Adam Youngers    schedule 04.06.2012