html - ul 上的 CSS 渲染不一致，Firefox 是奇怪的球

背景

我正在使用带有 anchor 和标题的嵌入式无序列表创建二级导航菜单。使用 CSS 重置表，所有标题和 anchor 都设置为“显示: block ”。当设置 list-style-position: inside 时，Firefox 和 Camino 会在元素符号下方呈现标题和 anchor ，而 Safari、Camino 和 IE 会内联呈现它。

示例屏幕截图

_{(来源:michaelgrace.org)}

_{(来源:michaelgrace.org)}

示例代码

<html>
<head>
  <style type="text/css">
    /* css reset */
    h1, h2, h3, h4, h5, h6, a { display: block; }

    /* list styling */
    ul { list-style-position: inside; }
  </style>
</head>
<body>
<ul>
  <li>
    <h3>Primary</h3>
    <ul>
      <li>
        <h4>Secondary</h4>
        <ul>
          <li>
            <h5>Tertiary</h5>
            <ul>        
              <li><a href="#">Tertiary Link</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
<ul>
</body>
</html>

为了让 Firefox 和 Camino 与其他浏览器呈现相同的效果，我将无序列表、标题和链接设置为“显示:内联”，但我仍然想知道...

问题

为什么 Firefox 和 Camino 会在 Safari、Opera 和 IE 呈现为“正常”时呈现列表元素符号下方的列表项？

最佳答案

更新

这实际上是坏的，从 2000 年就开始了。仍然没有修复。我以为我已经弄明白了，但这是我的一个错误。还是坏了! :(

回答

将“list-style”的 CSS 属性设置为“disc”将导致 Firefox 和 Camino 渲染引擎 Gecko 将无序列表中的标题渲染为“正常”。

答案背景

在遵循@o.k.w 深入研究渲染引擎的建议后，我发现我的问题已于 2000 年 4 月 22 日在 bugzilla.mozilla.org 上报告! (*咳咳* 嗯，Mozilla...错误仍然存在。)报告的错误在 https://bugzilla.mozilla.org/show_bug.cgi?id=36854讨论 Mozilla 的渲染引擎 Gecko , 在显示内部列表项标记时在无序列表中显示标题时出现问题。它还说了这个问题:

"This actually seems to be a major CSS1 compliance issue..." - David Baron

在错误报告线程的底部有一个 w3c.org 文档链接，它引导我找到我的修复:

"There is a description in a CSS 2.0 recommendation: http://www.w3.org/TR/CSS2/generate.html#q11 which tell us that Gecko behavior is faulty." - Listy Blaut

在该文档的底部，建议将 CSS list-style 设置为 disc:

ul        { list-style: disc }

将无序列表 list-style 设置为“disc”已经“修复”了 Gecko 渲染引擎浏览器、Firefox 和 Camino 中的渲染问题，同时在其他浏览器中保持列表不变。 *注:虽然“光盘”是list-style-type property ，如果使用“list-style-type:disc”而不是“list-style:disc”，则无法解决问题。

解决方案示例代码

<html>
<head>
    <style type="text/css">
        /* css reset */
        h1, h2, h3, h4, h5, h6, a { display: block; }

        /* list styling */
        ul { list-style-position: inside; list-style: disc;}
    </style>
</head>
<body>
     <ul>
        <li>
          <h3>Primary</h3>
          <ul>
             <li>
                <h4>Secondary</h4>
                <ul>
                  <li>
                     <h5>Tertiary</h5>
                     <ul>            
                        <li><a href="#">Tertiary Link</a></li>
                     </ul>
                  </li>
                </ul>
             </li>
          </ul>
        </li>
     <ul>
</body>
</html>

找到自己问题的答案的感觉

_{(来源:michaelgrace.org)}

我终于可以 sleep 了； )

关于html - ul 上的 CSS 渲染不一致，Firefox 是奇怪的球，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1142314/