2

问题：无序列表项目顶部有一个空格。这个空间出现在 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/

4

2 回答 2

4

这似乎是列表样式与前面/包含块元素（例如h3和）的内联元素冲突的问题p。如果您不会出现此问题

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

鉴于您的情况，第三个选项可能是最好的解决方法，它不会对布局造成太大影响（如果有的话）。如果您无论如何要将列表项的全部内容转换为链接，则不妨将其显示为块。这样，所有东西都安全地包含在一个块盒中，其渲染定义非常明确且完全可靠。

于 2013-01-26T10:31:04.730 回答
-1

h3 元素显示为块元素。这意味着它们占据了浏览器窗口的整个宽度，并且在它们的上方和下方都有一个空间。您需要更改 h3 标签以显示为内联元素，这样它们就不会破坏文档的流程。您可以将块元素更改为内联元素，如下所示：

CSS：

  h3{
      display:inline;
  }

这是更新的jsFiddle

于 2013-01-26T10:30:04.847 回答