ie8使用list-style-position有趣：里面 [英] ie8 playing funny with list-style-position: inside

问题描述

好的，

所以这里的问题...当使用list-style-position：在IE8的第一个是缩进，但每一行之后不是。

So problem here... when using list-style-position:inside in IE8 the first like is indented but every line after that is not. So the new lines appear under the bullet.

这是很好的，但是当我使用一个列表，并且在CSS中应用了一个标签时，文本会自动获取推到第二行，第一行为空。

This is fine, but when I use a list with that css applied with an a tag within the li then the text automatically gets pushed to the second line, and the first line is empty.

当我从li中删除一个标签，然后它跳回来。

When I remove the a tag from the li then it jumps back up.

任何想法为什么这可能是或是这是一个在ie8世界中的错误，或者我只需要双检查我的CSS。

Any idea on why this might be or is this a bug in the ie8 world or do I just need to double check my 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我会尝试并尽可能显示它

For the CSS I will try and show it best I can

#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;
}

希望这有助于

推荐答案

更改

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

到

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

这篇关于ie8使用list-style-position有趣：里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！