兩元素「表」很好地對齊

Question

這是一個有點開放式的問題，但我真的很想理解這一個，所以我不在乎。

我有一個兩元素「表」（CSS與跨度）。左欄總是有一個20x20像素的圖標。第二列有與該圖標關聯的單行文本。

我已經通過各種想法了，我可以拿出來讓這個看起來正是在IE6-8，火狐3.5和谷歌Chrome相同，但所有的想法導致文本具有一個或兩個像素關閉至多。

我正在尋找一個防呆非<table>的方式，使這個名單看起來完全在所有瀏覽器相同。我的意思是每個像素。

Answer 1

像素完美並不存在 - 你根本就沒有那種在瀏覽器那裏的控制範圍，並且也不是爲你盈利試圖讓它如此。收益遞減，你的名字是IE6。

Fwiw，這聽起來很可能是你在這裏做得更好，只是列表（<ul>）列表式樣設置爲無，並使用背景圖像來顯示您的20x20圖標。

Answer 2

是...

渲染的圖像;）

（對不起，但如果你想真的 「pixle完美」，那麼這很可能是最簡單的方法）

Answer 3

你是追逐一個移動的目標。有這麼多的布魯斯和這麼多的版本，最有可能永遠不會成爲一種完美的方式。然後，即使你確實接近完美，任何瀏覽器的下一個版本都可能會再次崩潰。

Answer 4

我的問題是：如果這真是一個表，爲什麼不使用<table>？避免爲普通頁面佈局使用表是一回事，但表格標記對於顯示錶格仍然是完全合法的。

如果不爲你工作，考慮<ul>修改或相似。儘管如此，你不可能在所有瀏覽器中真正實現像素完美。

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你可以使用absolut和基本上任何相對定位，但在跨瀏覽器兼容性方面它遠非完美。