Question

这是一个有点开放的问题，但我真的很想理解这个，所以我不在乎。

我有一个双元素“表”（带有跨度的CSS）。左列总是有一个20x20像素的图标。第二列有一行与图标相关联的文本。

我已经完成了各种各样的想法，我可以在IE6-8，Firefox 3.5和谷歌浏览器中看到完全相同，但所有想法都会导致文本成为一个或最多两个像素。

我正在寻找一种傻瓜式的非<table>方法，使这个列表在所有浏览器中看起来完全一样。我的意思是每一个像素。

Answer 1

你正在追逐一个移动的目标。有这么多的broswers和许多版本，很可能永远不会成为一个完美的方式。然后，即使你确实接近完美，任何浏览器的下一个版本都可能会再次破坏它。

Answer 2

像素完美不存在 - 你根本就没有对那里的浏览器范围进行那种控制，也没有尝试做到这一点有利可图。收益递减，你的名字是IE6。

Fwiw，听起来你可能会做得更好，只需要一个列表（<ul>），list-style-type设置为none，并使用背景图像显示你的20x20图标。

Answer 3

这是我的问题：如果它真的是一张桌子，为什么不使用<table>？避免将表用于一般页面布局是一回事，但表标记仍然完全合法，以及显示表格。

如果这对您不起作用，请考虑进行<ul>修改或类似修改。但是，你不太可能在所有浏览器中获得真正的像素完美。

Answer 4

...是

渲染图像;）

（对不起，如果你真的想要“pixle perfect”，那么这很可能是最简单的方法）

Answer 5

我同意Tony和annakata。但是，通常最好的结果来自这样简单的事情：

<span><img src="images/icon.gif" style="vertical-align:text-bottom;" />Some text</span>

至少在webkit，ie8和firefox中看起来完全相同。（我也相信ie7，但我没有测试）

Answer 6

我对这个巨大的编辑感到遗憾，我没有正确地阅读这个问题。正如一些人已经说过，在网站上实现像素感染非常困难，因为每个浏览器都以不同的方式呈现页面。使用css，您可以使用基本上任何东西的绝对和相对定位，但在跨浏览器兼容性方面它远非完美。