Question

确定，

这里有问题...当使用list-style-position时：在IE8中，第一个像是缩进但是之后的每一行都不是。所以新的线条出现在子弹下。

这很好，但是当我使用一个列表，其中css应用了li中的一个标签，然后文本自动被推到第二行，第一行是空的。

ie8 bug http://www.rocketspark.co.nz/bug_images/ie8_list.png

当我从li中删除a标签时，它会跳回来。

有关为什么会这样或者这是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;
}

希望这有帮助

Answer 1

变化

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

Answer 2

@salgiza在上面的评论中发布了答案......“看起来IE8在计算”a“的宽度（显示为块）并将其推向新行时出现问题。首先，我会尝试为“a”元素添加一个宽度，看看是不是问题。“

ie8和list-style-position一起玩搞笑：里面

2 个答案: