2要素＆＃8220;テーブル＆＃8221;うまく整列

Question

これはいくぶん自由回答形式の質問ですが、気にしないで本当に理解したいのです。

2要素の「テーブル」があります。 （スパンのあるCSS）。左の列には常に20x20ピクセルのアイコンがあります。 2番目の列には、アイコンに関連付けられた1行のテキストがあります。

IE6-8、Firefox 3.5、Google Chromeで同じように見えるようにするために思いついたあらゆる種類のアイデアを試してきましたが、すべてのアイデアは1つのテキストになりますまたは最高で 2ピクセル離れています。

このリストをすべてのブラウザでまったく同じようにするための、＆lt; table＆gt; の簡単な方法を探しています。すべてのピクセルを意味します。

Answer 1

Pixel完全版は存在しません-あなたは単にそのような種類のブラウザを制御することはできませんし、そうすることを試みることは有益でもありません。収益が減少し、あなたの名前はIE6です。

Fwiw、list-style-typeをnoneに設定し、背景画像を使用して20x20を表示するリスト（＆lt; ul＆gt; ）を単純に作成した方が良いかもしれませんアイコン。

Answer 2

あなたは動いているターゲットを追いかけています。非常に多くのブラウザと非常に多くのバージョンがあるので、おそらくそれを完璧にする方法はありません。そして、たとえあなたがそれを完璧に近づけたとしても、ブラウザの次のリリースは再びそれを壊すかもしれません。

Answer 3

ここに私の質問があります：もしそれが本当にテーブルなら、なぜ＆lt; table＆gt; を使用しないのですか？一般的なページレイアウトの目的でテーブルを使用することを避けることは1つのことですが、tableタグは、テーブルを表示するために完全に正当です。

それでもうまくいかない場合は、＆lt; ul＆gt; の変更などを検討してください。ただし、すべてのブラウザーで真にピクセルパーフェクトになることはまずありません。

Answer 4

はい...

画像のレンダリング;）

（申し訳ありませんが、本当に「ピクセル完璧」にしたい場合は、これが最も簡単な方法です）

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を使用すると、ブラウザ間での互換性に関しては、完全ではありませんが、基本的には絶対的で相対的な配置を使用できます。