修改

Question

背景

我正在使用包含锚点和标题的嵌入式无序列表创建辅助导航菜单。使用CSS重置表，所有标题和锚点都设置为“display：block”。当list-style-position：inside设置时，Firefox和Camino会在子弹下方呈现标题和锚点，而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与其他人一样呈现，我将无序列表，标题和链接设置为“display：inline”，但我仍然想知道......

问题

为什么Firefox＆amp;当Safari，Opera和＆amp ;;时，Camino在列表子弹下方呈现列表项。 IE渲染它“正常”？

Answer 1

更新

这实际上已经破了，自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在无序列表中显示标题时出现问题的事实在里面显示列表项标记。它还谈到了这个问题：

“这实际上似乎是一个主要的CSS1合规问题......” - David Baron

在错误报告主题的底部有一个w3c.org文档链接，让我找到了我的修复程序：

“CSS 2.0推荐中有一个描述： http://www.w3.org/TR/CSS2/generate.html#q11告诉我们Gecko的行为是错的。“ - Listy Blaut

在该文档的底部有一个建议将CSS列表样式设置为光盘：

ul        { list-style: disc }

将无序列表列表样式设置为“disc”已经“修复”了Gecko渲染引擎浏览器中的渲染问题，Firefox＆amp; Camino，在其他浏览器中保持列表不变。 *注意：虽然“disc”是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）}

我终于可以睡觉了; ）

Answer 2

因为标题是一个块元素，因此被推送到下一行（因为块级元素显示为block（或者没有另外指定的display -type [inline-block，inline等等......获取）不能共享一行;我不知道列表元素是否应该（或不应该），根据规范，包含块级元素在内部，或者是否应该假定它与包含元素“共享”该行。

但是，关于所有这些，我可能是错的;这只是我能想到的唯一解释。

您也可以发现在Firefox中的标题元素中应用了默认边距，填充或定位。您可以使用Firebug（或替代品）进行测试，以查看定位的来源。

修改

将代码复制粘贴到我的模板文件中，然后在FF3.0.10中查看后，我看不到您报告的问题。我使用的结果代码粘贴在下面，如果你还没有解决这个问题，请尝试下面的代码，看看问题是否仍然存在：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title><link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style type="text/css">
    /* css reset */
    h1, h2, h3, h4, h5, h6, a { display: block; }

    /* list styling */
    ul {  width: 14em; margin: 1em auto;}
  </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>

Answer 3

我尝试了两个样本并自己尝试了一下。

区别因素奇怪的是“列表式位置”。不知何故，在FF中，“内部”和“外部”对子弹有“内联”和“阻挡”效果。

我无法告诉你原因，可能需要深入了解渲染引擎。

Answer 4

list-style: disc被解释为list-style: disc outside所以我认为只是避免了FF的布局问题而不是修复它。

我取得了一些成功的解决方法，将list-item的第一个子项设置为display: inline，这会将标记放回正确的位置：

http://jsfiddle.net/6GhPT/2/

我在IE≤9中也看到了同样错误的渲染（列表标记上面列出的列表标记）。

Answer 5

好吧，我遇到了同样的问题，但是圈子不是一个选项 - 我需要十进制表示法。经过几分钟的研究，我找到了一个完美的解决方案

ol { counter-reset: li; } ol li h4:before { content: counter(li) ". "; counter-increment: li; } 在元素上我想附加列表样式的项目（在我的情况下，它是ol＆gt; li＆gt; div＆gt; h3！它也可以相对/绝对定位）。效果很好，项目数量与H3内容完美结合。

我真的建议你试一试。这是完整的教程：http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

Answer 6

修复：

.dpe-flexible-posts li::before{
    content: '●';
    position: absolute;
    left: -14px;
    top: -1px;
}
.dpe-flexible-posts li{
    list-style-type: none;
    position: relative;
}

CSS渲染不一致的ul与Firefox是奇怪的球

背景

屏幕截图示例

示例代码

问题

6 个答案:

更新

答案

答案背景

解决方案示例代码

我如何找到自己问题的答案

修改