Границы таблицы в HTML-письме на iPad и iPhone

Question

У меня есть граница пикселей между строками таблицы при тестировании электронной почты.только для iPhone и iPad.Я пробовал:

* {
margin:0;
padding:0;

}

Я также пробовал: это делает границу синей, а не белой, но я хочу, чтобы она была полностью удалена?

Answer 1

Это, очевидно, происходит, когда вы применяете цвета фона или изображения к отдельным ячейкам таблицы.Я удалил отдельные ссылки bgcolor и background-color из таблиц с загадочными границами, и проблема исчезла!

Источник: Ошибка iPhone: проблема с границами таблицы и электронной почтой HTML (Campaign Monitor)

Answer 2

Попробуйте добавить это:

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

Это не позволит пользователям увеличивать масштаб. Я обнаружил, что это тоже работает:

<meta content='width=device-width; initial-scale=1.0;' name='viewport' />

Но, при увеличении выглядело это сноваНачальная загрузка работала, поэтому я остался доволен вторым вариантом.

Answer 3

Я "решаю" это, используя box-shadow.Я знаю, что это не красиво, но эй, мы говорим о таблицах здесь:)

Просто поместите тень блока на любой TD, у которого цвет родительского узла появляется на iPad.Вы даже можете сделать это только для iPad внутри специального медиазапроса для iPad.

Answer 4

Это проблема в iOS, для получения дополнительной информации см .: http://www.campaignmonitor.com/blog/post/3585/iphone-fail-the-trouble-with-table-borders-and-html-email

По сути, это связано с различными цветами фона для ячеек таблицы.Цитата:

"Чтобы эти границы не отображались на iPhone, вы можете попробовать:

• Удаление фоновых цветов или изображений из отдельных строк и ячеек таблицы и / или;
• Вложение проблемной таблицы в новую таблицу с цветом фона, совпадающим с цветом внутренней таблицы. "

Answer 5

попробуйте добавить:

border-collapse:collapse;

посмотрим, что произойдет

Answer 6

В моем случае я хотел таблицу, которая выглядела как перекрывающиеся прямоугольники, где фоновое поле заканчивалось до конца строки, а поле переднего плана начиналось с отступом от начала строки. После прочтения каждого веб-сайта, Q / A, предложил здесь и попробовал каждую альтернативу, что в конечном итоге работало, указав box-shadow, например ::

<table style="margin-right: auto; margin-left: auto; width: 100%;" cellspacing="0" cellpadding="3">
  <tbody>
    <tr>
      <td colspan="4" style="width: 90%; background-color: navy;">
        <span style="color: #ffffff;">Background Box Line 1</span>
      </td>
      <td style="width: 10%;">
        &nbsp;
      </td>
    </tr>
    <tr>
      <td style="background-color: navy; width: 25%; box-shadow: 0px -1px 0px navy;">
        <span style="color: #ffffff;">BG Box Line 2</span>
      </td>
      <td colspan="4" rowspan="2" style="background-color: red; width: 75%;">
        Foreground Box Line 1<br>
        Foreground Box Line 2
      </td>
    </tr>
    <tr>
      <td>
        &nbsp;
      </td>
    </tr>
  </tbody>
</table>

Линия, от которой мне пришлось избавиться, была тонкой горизонтальной линией разрыва между двумя «фоновыми» клетками флота, появляющимися на iPhone, и box-shadow: 0px -1px 0px navy; позвольте мне поставить тонкую линию флота над нижней ячейкой флота и таким образом заполнить в противном случае был промежуток между верхней и нижней частями военно-морского флота.

Answer 7

Хотя изменение цвета фона содержащей таблицы работало для большинства частей моего макета, для одного раздела это было невозможно. Там я использовал относительное позиционирование и левое значение -1 (в правой ячейке). Я был удивлен, увидев, что позиционирование поддерживается (по крайней мере, в iOS 6.1). Полагаю, отрицательная маржа тоже сработала бы.

Answer 8

изображения?добавить style="display:block;" к изображениям

Answer 9

border: 0;

должно делать это легко и просто