浮动列表项导致项目符号/数字在 webkit 上消失答案

【问题标题】：floated list items cause bullets/numbers to disappear on webkit浮动列表项导致项目符号/数字在 webkit 上消失
【发布时间】：2013-11-17 12:57:31
【问题描述】：

我的 CSS：

ul, ol {
  margin:0 0 1em 0;
}
ul:after, ol:after, ul:before, ol:before {
  content: ".";
  display: block;
  clear: both;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
li {
  clear: both;
  float: left;
}

我的 html 是任何普通的列表结构

在 Firefox 上按预期工作，并显示为正常的项目符号或有序列表。

但是，在 Webkit 浏览器 Chrome/Safari 上，缩进与预期一样，但缺少列表样式。

这里讨论的解决方案 (Show unordered list inline, but keep the bullets) 不适用于我，因为我需要为无序列表和有序列表解决这个问题。然而，IE7 不是必需的（IE8+ 是）。

浮动列表项很奇怪，我知道，但这是我正在构建的文本选择 UI 的要求。

请注意，虽然这在 JSFiddle 中有效，但纯 HTML/CSS 页面会演示此行为：

<html>
  <head>
    <style type="text/css">
      ul, ol {
        margin:0 0 1em 0;
      }
      ul:after, ol:after, ul:before, ol:before {
        content: ".";
        display: block;
        clear: both;
        overflow: hidden;
        visibility: hidden;
        font-size: 0;
        line-height: 0;
        width: 0;
        height: 0;
      }
      li {
        clear: both;
        float: left;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <ul>
      <li>two eggplants, not too fat</li>
      <li>red sauce, hopefully from your kitchen</li>
      <li>fresh mozzarella</li>
      <li>basil</li>
      <li>breadcrumbs, or stale/dried bread to make them</li>
      <li>a couple of eggs for breading</li>
      <li>parmigiana cheese for breading</li>
    </ul>

  </body>
</html>

【问题讨论】：

您的 CSS 似乎可以在 Chrome 中运行。我缺少什么？ jsfiddle.net/JoshC/Khd2F
这很奇怪......它独立工作，但不在作为文本通用容器的 div#words 中。 #words 根本没有影响列表的其他样式，我已经注释掉了所有其他样式以进行测试。我还在#words 之外放置了一个列表，它可以正确呈现。我无法想象这里发生了什么。
不...这适用于 chrome 中的 jsfiddle 但仅存在..这是某种 Quirks 模式风格的东西吗？

标签： css html webkit

【解决方案1】：

<!DOCTYPE html>

我一天之后的大部分时间......总是使用 DTD

也适用于 4.01 strict。

伤心

【讨论】：

太棒了。 Safari 和 wkhtmltopdf 也有同样的问题，这是使我们的样式正常工作的唯一解决方案。