Двухэлементный "стол" выровнен красиво

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

Answer 6

Да ...

Рендеринг изображения;)

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