Двухэлементная “таблица” хорошо выровнена

Question

Это несколько открытый вопрос, но я действительно хочу разобраться в нем, так что мне все равно.

У меня есть двухэлементная "таблица" (CSS с промежутками).В левой колонке всегда есть значок размером 20x20 пикселей.Второй столбец содержит одну строку текста, связанную со значком.

Я перебрал всевозможные идеи, которые мог бы придумать, чтобы придать этому образу именно так то же самое в IE6-8, Firefox 3.5 и Google Chrome, но все идеи приводят к тому, что текст отклоняется на один или два пикселя в лучшем случае.

Я ищу надежный не--<table> способ сделать так, чтобы этот список выглядел абсолютно одинаково во всех браузерах.Я имею в виду каждый отдельный пиксель.

Answer 1

Pixel perfect не существует - у вас просто нет такого контроля над рядом браузеров, и вам не выгодно пытаться сделать это так. Снижение отдачи, твое имя IE6.

Между прочим, также вероятно, что вам лучше бы здесь иметь список ( < ul > ) с типом списка-стиля, равным none, и использовать фоновые изображения для отображения вашего 20x20. иконки.

Answer 2

Вы преследуете движущуюся цель. С таким большим количеством броузеров и таким количеством версий, скорее всего, никогда не будет способа сделать его идеальным. Тогда, даже если вы доведете его до совершенства, в следующем выпуске любого из браузеров он может снова сломаться.

Answer 3

Вот мой вопрос: если это действительно таблица, почему бы не использовать < table > ? Одно дело избегать использования таблиц в целях общего макета страницы, но тег table по-прежнему вполне допустим для отображения таблиц.

Если это не работает для вас, рассмотрите вариант < ul > или аналогичный. Тем не менее, маловероятно, что вы когда-либо получите его действительно идеальным с точки зрения пикселей во всех браузерах.

Answer 4

ДА...

Визуализировать изображение ;)

(Извините, но если вы хотите, чтобы это действительно было "пиксельно идеально", то это, скорее всего, самый простой способ)

Answer 5

Я согласен с Тони и annakata . Тем не менее, обычно лучший результат получается из чего-то простого:

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

Что, по крайней мере, выглядит одинаково в webkit, ie8 и firefox. (Я тоже считаю ie7, но я не тестировал)

Answer 6

Мне очень жаль это огромное изменение. Я не прочитал вопрос должным образом. Как уже говорили некоторые, очень трудно достичь пиксельного совершенства на веб-сайте, так как каждый браузер отображает страницы по-своему. С css вы можете использовать абсолютное и относительное позиционирование практически всего, кроме его далеко не идеального, когда дело доходит до кросс-браузерной совместимости.