IE ошибка с таблицами TD и пробелами?

Question

У меня есть страница, которая использует таблицы, в FF и т. Д. Она отлично работает, но в IE7 это вызывает проблемы, это в основном, где четыре угла имеют td и и img (это форма закругленного угла) .. если я удаляю пробел в документе, который устраняет проблему .. На самом деле происходит то, что он портит таблицы ... он помещает тонкую белую линию между верхним tr, который содержит 2 угла, и следующим tr

Мне нужно удалить пробел между img и TD, есть ли лучший способ обойти это, так как у меня много, и не только, что если я переформатирую документ, проблема вернется ..

Вот простой пример.

   <table width="100%" height="418" border="0" cellpadding="0" cellspacing="0" bgcolor="#F04A23"
            style="margin: 0px; padding: 0px">
            <tr>
                <td width="12" align="left" valign="top">
                    <img src="content/images/corner_left.gif" width="12" height="12" />
                </td>

как видите, между img и td есть пробел ... и я убираю его, чтобы он выглядел так:

<img src="content/images/corner_left.gif" width="12" height="12" /></td>

проблема исчезла (обратите внимание, что тд и изображение находятся рядом друг с другом)

Любые идеи, я пытался установить все виды CSS, отступы 0px, поля 0px и т. Д. *

Любые идеи действительно ценятся.

Answer 1

Как оказалось, удаление пробелов НЕ является единственным способом исправить это. Все остальные, наверное, уже поняли это, но я решил добавить это сюда для полноты информации для следующей бедной души, которая наталкивается на эту досадную проблему.

По сути, вам не нужно беспокоиться о пробелах в разметке. Вместо этого добавьте style = "display: block;" в тег img. Поскольку изображения являются встроенными элементами, и у вас есть пробел в разметке, IE добавляет лишний пробел к нижней части ячейки, чтобы учесть возможность текста с разделителями (например, g, y, p и т.д.). Установка тега img для отображения в качестве блочного элемента позаботится об этом. Нет больше уродливых пробелов!

Кредит идет этому парню: http://blog.wheelerstreet.com/ie-white-space-issue-with-td-and-img-solved,, где я нашел ответ. Полагаю, он получил это из дискуссионной группы Google или другой.

Надеюсь, это поможет!

Answer 2

Единственный способ «исправить это» (и я использую этот термин свободно) - удалить пробел .

Что еще более важно, вы должны прекратить создавать сайты, как это было в 2001 году.:)

Answer 3

Я исправил добавление этого до конца таблицы:

<tr>
<td height="0"><img src="pixel.gif" width="0" height="0" alt=""></td>
</tr>

Надеюсь, эта помощь.

Answer 4

Это на какое-то время приводило меня в бешенство - переход с IE 8.0 на IE 9.0 на сайтах интрасети - все изображения внезапно имели немного пустого пространства.

Настройка отображения: блок на изображениях сделал это для меня.

Answer 5

Я перепробовал все решения выше:

а) попробовал дисплей: блок

b) удалены пробелы в тегах td (т.е. я использовал теги tr и td без пробелов между ними)

в) Я пытался использовать:

padding:0px;border-spacing:0px;border-style:none;border-collapse: collapse;margin:0;overflow: hidden;

Решение а) сработало. Решения б) и в) не работают на IE.

Но ЛУЧШЕЕ РЕШЕНИЕ, которое я нашел, таково:

Добавить атрибут hspace=0 к тегу Image. Например:

<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1" class="ImageHeader" hspace="0" />

Это делает трюк.

Answer 6

У меня тоже была эта проблема с сайтом интрасети в Internet Explorer, поэтому я отключил режим просмотра совместимости для сайтов интрасети, чтобы исправить ее:

Answer 7

Еще один поздний ответ, но вы также можете использовать line-height: 0; для удаления пробелов. Чтобы текст по-прежнему читался, вы можете заключить его в другой элемент и использовать line-height: normal или другое значение по вашему выбору.

td * { line-height: normal; }

Answer 8

Другое (и лучшее :)) решение:

1. установите ширину / высоту td на ширину / высоту изображения с помощью css
2. установить изображение на фон для тд

Как:

<td style='width: 12px; height: 12px; background: url(corner-left.gif) no-repeat;'></td>

Это работает от меня:)

(простите за мой английский: ">)

Answer 9

Так было, насколько я помню, все версии.

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

Answer 10

IE обнаруживает, что внутри TD есть текстовое содержимое (кроме изображения), поэтому он дает ему текст line-height Попробуйте установить height и overflow: hidden для TD.