Html 确保列表图像不会在左侧被截断_Html_Css_Webkit

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

html css

Html 确保列表图像不会在左侧被截断,html,css,webkit,Html,Css,Webkit,我希望确保我的列表图像，即无序列表的项目符号和有序列表的数字/字母等，无论使用何种字体大小，都不会在左侧截断。对于基于WebKit的浏览器来说，这似乎是一个问题，我不确定是否有合适的解决方法例如，以下HTML片段在Chrome 8/9中显示不正确： <html> <body> <ol style="font-size: 48px;"> <li>one</li> <li>

我希望确保我的列表图像，即无序列表的项目符号和有序列表的数字/字母等，无论使用何种字体大小，都不会在左侧截断。对于基于WebKit的浏览器来说，这似乎是一个问题，我不确定是否有合适的解决方法

例如，以下HTML片段在Chrome 8/9中显示不正确：

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

同一段HTML正确显示，即在InternetExplorer8中不会截断左侧

我发现了两个不受欢迎的解决方法：

指定列表样式位置：内部；在名单上。这会迫使列表图像与内容一起流动，但在我看来，这会造成非标准/混乱的外观。在列表中指定某种类型的边距/填充。这是可行的，但是它会给较小字体的列表添加太多的填充。这里的屏幕截图显示了Chrome9.0.597.98中的问题；请注意，数字是如何在左边距处截断的：

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

我在Chrome9和OSX上的最新Safari中看到了您的问题。您可以尝试在ems中指定页边距，使其与字体大小成比例，这对我来说会产生合理的结果：

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

但是当然。最好的方法是使用上的类来保持字体大小和边距在一起，然后可以将它们调整在一起，以便在各种浏览器中获得合理的结果

这不是一个完美的解决方案，但在多个浏览器和多个操作系统上实现像素相同的结果不仅令人沮丧，而且往往是不可能的，而且毫无意义。

我在Chrome 9和OSX上的最新Safari中看到了您的问题。您可以尝试在ems中指定页边距，使其与字体大小成比例，这对我来说会产生合理的结果：

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

但是当然。最好的方法是使用上的类来保持字体大小和边距在一起，然后可以将它们调整在一起，以便在各种浏览器中获得合理的结果

这并不是一个完美的解决方案，但在多个浏览器和多个操作系统上实现像素相同的结果不仅令人沮丧，而且往往是不可能的，而且还有点毫无意义。

您是否为列表设置了边距/填充

对于UL和OL元素，浏览器可能具有不同的默认样式

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

请参见此处了解基本CSS重置：

是否为列表设置边距/填充

对于UL和OL元素，浏览器可能具有不同的默认样式

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

请参见此处了解基本CSS重置：

您可以发布屏幕截图吗？我在Opera 11、Chrome 9和FF4中进行了测试，它们看起来都很好。我附上了一个屏幕截图，显示Chrome 9中存在的问题。我很惊讶你不能重现这个浏览器的问题，因为我认为任何基于WebKit的浏览器在加载HTML时都会出现这个问题。你能发布截图吗？我在Opera 11、Chrome 9和FF4中进行了测试，它们看起来都很好。我附上了一个屏幕截图，显示Chrome 9中存在的问题。我很惊讶你不能重现这个浏览器的问题，因为我认为任何基于WebKit的浏览器在加载HTML时都会出现这个问题。但是如果其中一个s换行到第二行，它会换行到列表标记下，询问者不喜欢这个外观。@mu-你说得对。我编辑了我的原始帖子以解决包装问题。屏幕截图来自Safari OSX。IE在将48px和12px与十进制对齐方面做得更好，但对小文本上的支持类进行一些修补可以解决这一问题。我使用Safari OSX进行了检查，48px版本剪切了左侧的列表标记。将左边距添加到列表或项目中可以解决该问题，哪个元素的左边距取决于您所追求的外观。但如果其中一个元素换行到第二行，它将换行到列表标记下，询问者不喜欢该外观。@mu-您是对的。我编辑了我的原始帖子以解决包装问题。屏幕截图来自Safari OSX。IE在将48px和12px与十进制对齐方面做得更好，但对小文本上的支持类进行一些修补可以解决这一问题。我使用Safari OSX进行了检查，48px版本剪切了左侧的列表标记。将左边距添加到列表或项目中可以解决该问题，哪个元素的左边距取决于您所追求的外观。谢谢您的建议。我认为你的方法最接近我想要达到的目标，尽管所有的答案都让我深思。谢谢你的建议。我认为你的方法和我的最接近虽然所有的答案都给了我一些思考的食物，但我仍在努力实现。