html - 为什么无序列表项顶部有一个空格？

Question

问题:无序列表项顶部有一个空格。这个空格出现在 Firefox 18.0.1

HTML:

<ul>
<li>
    <a href="">
        <h3>Lorem ipsum</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content</p>
    </a>
</li>
<li>
    <a href="">
        <h3>Lorem ipsum</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content</p>
    </a>
</li>
<li>
    <a href="">
        <h3>Lorem ipsum</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content</p>
    </a>
</li>

CSS:

ul {
    list-style: square;
    margin-left: 20px
}

工作演示: http://jsfiddle.net/vpdd7/

Answer 1

这似乎是列表样式与 block 元素前面/包含 block 元素(例如 h3 和 p)冲突的问题。如果您

• set ul to list-style-type: none

• set li to anything other than display: list-item

• set a to display: block

• remove the a element altogether

• set h3 to anything other than display: block

我在 CSS2.1 spec 中找不到任何内容这将确定此行为是 Firefox 中的错误，还是其他浏览器中的错误。其实在list-style-position下，它表示标记框(包含元素符号)的确切位置或布局未定义，即使相对于由 li 元素本身(主框)或其任何元素创建的框也是如此 children 。

鉴于您的情况，第三个选项可能是最好的解决方法，它不会对布局造成太大影响(如果有的话)。如果您打算将列表项的全部内容变成一个链接，那么您最好将其显示为一个 block 。这样，所有内容都安全地包含在 block 盒中，其渲染定义非常明确且完全可靠。