#css #internet-explorer #html-table #html-email
#css #internet-explorer #html-таблица #html-электронная почта
Вопрос:
Я создаю электронное письмо в формате HTML как
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="image.jpg" width="x" height="y" style="margin:0; padding:0; display:block;">
</td>
</tr>
<tr>
<p>Para with lots of text</p>
</tr>
</table>
Однако в нижней части изображения остается ненужное пространство при просмотре в Internet Explorer. Как я могу избавиться от этого пространства?
Ответ №1:
Это не ошибка или что-то подобное.
В зависимости от используемого doctype разные браузеры применяют определенные значения для полей, отступов и границ к различным элементам.
Глядя на ваш код, я не вижу, где вы устанавливаете границу изображения на 0. Сделайте это.
Вообще говоря, лучший doctype для использования — просто <!DOCTYPE html> Это приводит к стандартному режиму практически во всех браузерах. Как только у вас это получится, вам нужно выполнить всего несколько незначительных настроек (таких как граница изображения), чтобы обеспечить полное соответствие.
Далее, тег абзаца недопустим внутри TR. Вам не хватает TD, как указал Sparky672.
Комментарии:
1. У меня была похожая проблема. Чтобы исправить, я сделал, как вы сказали: добавил «<!DOCTYPE html>». Затем я добавил CSS-правило высоты строки к <td>, и нежелательный вертикальный пробел исчез по желанию.
Ответ №2:
HTML для вашего <table> элемента неверен. Вам не хватает второго набора <td></td> тегов.
Кроме того, <p></p> разместит некоторое пространство над и под вашим текстовым заголовком. (Редактировать: Хотя технически верное утверждение о том, что <p> элемент имеет встроенное верхнее / нижнее поле, <p> не вызывает проблемы с OP)
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="image.jpg" width="x" height="y" style="margin:0; padding:0; display:block;">
</td>
</tr>
<tr>
<td>
Para with lots of text
</td>
</tr>
</table>
Комментарии:
1. Пространство все еще остается после удаления <p> .
2. @user1212 — Это может быть правдой, но тег P имеет встроенное поле для верхнего и нижнего, если вы не удалите его с помощью CSS. Итак, мой ответ содержит технически верное утверждение, даже если у вас все еще есть что-то еще, вызывающее вашу проблему. Как насчет исправления HTML таблицы?
Ответ №3:
может ли это быть <p> тегом, который предоставляет вам пространство после изображения и перед текстом?
Комментарии:
1. Это не тег <p> . Пространство все еще остается после удаления абзаца
Ответ №4:
Зачем иметь a <p> внутри table a? Это просто поместит его над таблицей. IE, вероятно, показывает пустое <tr></tr> . Вам может понадобиться <td> вокруг вашего <p>
Что происходит, когда вы вообще не используете таблицу и просто показываете изображение?
Комментарии:
1. Зачем использовать таблицу? Почему бы не сделать:
<p>Para with lots of text</p><p><img /></p>2. Хотя я согласен, что размещение
<p>блоков внутри таблицы — не лучший метод, ваше утверждение «Это просто поместит его над таблицей». технически неверно.<p>Внутри ячейки таблицы останется внутри ячейки таблицы.3. @Sparky672, ты прав. Думаю, я просто пытался сказать, используйте таблицу так, как она должна использоваться, или используйте пару тегов <p> . Их смешивание может быть сложным.
4. Да,
<table>элементы следует оставить для табулирования данных, а CSS использовать для макетов.
Ответ №5:
Я полагаю, что в IE есть ошибка, которая вставляет ненужное пространство после изображения при размещении внутри таблицы. Попробуйте удалить ВСЕ пробелы между вашими тегами:
<table border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="image.jpg" width="x" height="y" /></td></tr>
<tr>
<td><p>Para with lots of text</p></td>
</tr>
</table>
Да, это некрасиво, но отчасти именно поэтому таблицы не являются предпочтительным методом для разработки макета. Надеюсь, у вас это сработает.
Комментарии:
1. Я знаю, что пробелы следует игнорировать, отсюда и ошибка. Или, если вы предпочитаете, проблема или странность?… которым, как мы знаем, полон IE. Я не знаю, происходит ли это все еще в самых последних версиях IE, но определенно в более старых версиях.
2. @Sparky672: Зависит от типа документа / браузера.. Тем не менее, это все еще неправильный ответ, поскольку это не ошибка.
3. Практически все различия в рендеринге сводятся к неправильному использованию doctype в сочетании с незнанием разницы между различными режимами: строгий, почти строгий, причуды, … Возможно, вы захотите просмотреть: quirksmode.org/css/quirksmode.html Когда в режиме quirks все ставки отменяются, и вы отдаетесь на милость разработчиков браузера и обычно нуждаетесь в различных взломах, чтобы все выглядело одинаково из-за различий в модели box и значениях по умолчанию. В strict на самом деле есть только два основных тега, о которых вам нужно позаботиться: image и overflow.