CSS在不同的浏览器中对齐子弹点

Question

我试图找到一个子弹列表。这个想法是每个子弹点都与它上面的字母对齐。

我正在寻找的结果是这样的：
----- *字
------- *另一个词
--------- *第三个字

然而，我在firefox和chrome中使用这个外观有点麻烦。似乎子弹点小于它们在Firefox中的等效点，因此它们会偏离一两个像素。

有没有办法使用CSS制作兼容的跨浏览器？

Answer 1

试试此演示：http://jsfiddle.net/r9vkz/5/

1. 我只是将填充设置为<ul>元素。由于它们是嵌套的，因此传播填充（如果您愿意，还可以将填充左侧应用于<li>元素）

2. 我删除了默认的项目符号点，然后将其替换为应用于每个'BULLET' (U+2022)的unicode li:before，并且它在firefox和chrome中看起来都是相同的大小（我也试过{{ 1}}但它似乎无法正常工作）

Answer 2

问题是不同的浏览器可能会为子弹使用不同的图像（大小不同）。

您可以使用CSS指定用作项目符号的图像，以确保它在每个浏览器上都相同：

UL LI.x  { list-style-image: url(x.png) }

Answer 3

浏览器的子弹和标题等默认CSS设置略有不同。为了解决这个问题，人们经常使用“css reset” - 这是一些创建一组常见默认值的CSS。

我使用Yahoo Reset 2。这只能解决你问题的一半。这将使浏览器中的所有项目符号以相同的方式工作，但不是您希望它们看起来的方式。

首先使用CSS重置，然后添加你自己的项目符号CSS调整。