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

У меня есть страница, которая использует таблицы, в 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>

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

Любые идеи, я пробовал устанавливать всевозможные css, отступы 0px, поля 0px и т. д.

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


html css internet-explorer html-table
person mark smith    schedule 14.06.2009    source источник

Ответы (10)


arrow_upward
4
arrow_downward

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

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

person Paolo Bergantino    schedule 14.06.2009
comment
да, это было редактирование веб-сайта, я не стал бы использовать таблицы для макета... но в настоящее время это все, что у меня есть, пока я не конвертирую его... спасибо за ответ.. - person mark smith; 15.06.2009

arrow_upward
5
arrow_downward

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

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

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

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

person Bryan B.    schedule 17.03.2010
comment
Это круто! Благодарю вас! Больше не нужно бороться с пробелами! - person tdgtyugdyugdrugdr; 13.05.2013

arrow_upward
3
arrow_downward

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

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

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

person Federico    schedule 01.03.2011

arrow_upward
2
arrow_downward

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

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

person Martin Smellworse    schedule 27.03.2013

arrow_upward
1
arrow_downward

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

а) пробовал display:block

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

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

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

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

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

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

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

Это помогает.

person David    schedule 12.04.2011

arrow_upward
0
arrow_downward

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

person instanceof me    schedule 14.06.2009

arrow_upward
0
arrow_downward

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

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

person Eli    schedule 14.06.2009

arrow_upward
0
arrow_downward

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

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

Нравиться:

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

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

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

person Briganti    schedule 13.05.2011

arrow_upward
0
arrow_downward

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

td * { line-height: normal; }
person ChezFre    schedule 03.08.2011

arrow_upward
0
arrow_downward

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

введите здесь описание изображения

person Matthew Lock    schedule 07.09.2017