Question

我的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>

Answer 1

<!DOCTYPE html>

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

也适用于4.01严格。

悲伤

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

1 个答案: