两个元素的“表格”对齐得很好

Question

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

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

我已经想出了各种各样的想法来做出这个样子 确切地 在 IE6-8、Firefox 3.5 和 Google Chrome 中也是如此，但所有想法都会导致文本偏离一两个像素 最好.

我正在寻找一个万无一失的非<table> 使该列表在所有浏览器中看起来完全相同的方法。我的意思是每一个像素。

Answer 1

像素完美并不存在 - 你根本就没有那种在浏览器那里的控制范围，并且也不是为你盈利试图让它如此。收益递减，你的名字是IE6。

FWIW，这听起来也很有可能你会做得更好这里简单地与列表样式类型设置为none，并使用背景图片来显示你的20×20的图标的列表（<ul>）。

Answer 2

正在追逐的目标。有了这么多的broswers等许多版本存在将最有可能永远是一个办法让它完美。然后，即使你得到完美的任何浏览器的下一个版本接近可能再次打破它。

Answer 3

下面是我的问题：如果这真是一个表，为什么不使用<table>？这是一两件事，以避免使用表格的一般页面布局的目的，但该表的标签仍然是完全合法的，那么，显示表。

如果不为你工作，考虑<ul>修改或相似。这是不可能的，虽然，你永远得到它忠实地完美的像素在所有浏览器。

Answer 4

...是

渲染图像;）

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

Answer 5

我同意 托尼 和 安那方. 。然而，通常最好的结果来自这样简单的事情：

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

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

Answer 6

我是索里对这个庞大的编辑我没有正确读取的问题。 正如一些已经说过这是非常难以实现网站上pixelperfection为每个浏览器渲染网页不同。 使用CSS，你可以使用绝对和基本上什么，但它远非完美，当涉及到跨浏览器兼容的相对位置。