Question

我想确保我的列表图像（即无序列表的子弹符号和有序列表的数字/字母/等）从不截断左侧，无论它们使用何种字体大小。这似乎是基于WebKit的浏览器的一个问题，我不确定是否有一个像样的解决方法。

例如，使用Chrome 8/9时，以下HTML显示不正确：

<html>
  <body>
    <ol style="font-size: 48px;">
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ol>
  </body>
</html>

在Internet Explorer 8中正确显示相同的HTML片段（即，它不会在左侧截断）。

我发现的两个（不合需要的）解决方法是：

在列表中指定list-style-position: inside;。这会强制列表图像与内容一起流动，但它会造成非标准/凌乱的外观，IMO。
在列表中指定某种类型的边距/填充。这样可行，但是它会为字体较小的列表添加太多填充。

这是一个屏幕截图，显示Chrome 9.0.597.98中的问题;注意左边距的数字是如何被截断的：

Chrome 9 list image bug

Answer 1

<html>
<style>
#big {font-size:48px;}
#little {font-size:12px;}
ol { padding:0; margin:0; }
li  { margin:0 0 0 96px; padding:0 0 0 14px; }
</style>
  <body>
    <ol id="big">
      <li>one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one </li>
      <li>two</li>
      <li>three</li>
    </ol>
    <ol id="little">
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ol>
  </body>
</html>

enter image description here

Answer 2

我在Chrome 9和OSX上的最新Safari中看到了您的问题。您可以尝试在em中指定边距，以便使用font-size进行缩放，这对我产生了合理的结果：

ol { margin-left: 0.5em; }
li { margin-left: 0; }

但当然是YMMV。您最好的选择是使用<ol>上的课程将font-size和margin-left放在一起，然后您可以将它们调整在一起，以便在各种浏览器中获得合理的结果。

这不是一个完美的解决方案，但在多个浏览器和多个操作系统上获得像素相同的结果不仅令人沮丧，而且往往是不可能的，但也有点无意义（恕我直言）。

Answer 3

您是否为列表设置了保证金/填充？

浏览器可能具有UL和OL元素的不同“默认”样式。

应用“重置”样式规则和/或指定要应用于常用元素（如列表，段落，块引用，表格，标题等）的样式通常很有用。

请参阅此处了解基本的CSS重置：http://meyerweb.com/eric/tools/css/reset/

确保列表图像永远不会被截断在左侧

3 个答案: