Проблема с CSS на iPad со стороной стола

У меня проблема с CSS, когда html-страница отображается на iPad. Все работает хорошо в других браузерах. Проблема в том, что я получаю небольшое пространство между ячейками в моих таблицах, как вы можете видеть на картинке: http://oi53.tinypic.com/2vl0as9.jpg

Если я увеличиваю максимальный размер страницы на линии между ячейками, она исчезает. Так что это должно быть какая-то ошибка, когда страница отображается. Могу ли я обойти это каким-то образом? Это моя таблица и CSS:

<table class="smallTable" cellpadding=0 cellspacing=0>
    <tr>
        <td class="td1"></td>
        <td class="td2"></td>
    </tr>
    <tr>
        <td class="td1"></td>
        <td class="td2"></td>
    </tr>
</table>

CSS

.smallTable 
{
    margin: 20px auto 40px auto;
    border-spacing: 0;
}

.smallTable td
{
    margin: 0;
}

.smallTable td.td1 
{
    background: url(../images/table1.png);
}

.smallTable td.td2 
{
    background: url(../images/table2.png);
}

Ответ 1

Мне удалось установить этот метатег в html-заголовке, когда в запросе обнаружен iDevice (iPod, iPad, iPhone).

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

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

Ответ 2

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

У iPad есть ошибка (вздох!) при просмотре таблиц с шкалой не 1:1. Это особенно заметно, если тэги таблицы TD имеют темный фон, а родительский элемент TABLE имеет светлый цвет. Проблема в том, что Rowspans и colspans усиливают проблему.

Первоначально я думал, что проблема заключается в том, что iPad вводит границу.
Реальная проблема заключается в том, что кодеры Apple не решали, будут ли они равномерно округлять доли пикселя вверх или вниз, пока масштабируются.

Следовательно, некоторые теги TD имеют границу, если не в масштабе 100%. Когда на самом деле это просто светлый фон.

Решение, чтобы обернуть таблицу в другую таблицу с темным фоном.

Добро пожаловать в веб-дизайн 1998 года. Я слышал, что mp3.com - это все ярость. Собираюсь купить мне несколько почтовых заказов для собак от pets.com.

Спасибо iPad.

Ответ 3

Эврика! Я нашел решение, которое сработало для меня.

У меня был светло-серый фон, и это, казалось, было цветом, который был показан как границы вокруг моих столов, которые были более темного цвета.

Чтобы исправить это, вы должны поместить все теги, на которые влияют границы, отображающие себя в другую таблицу того же цвета.

Это работало, пытаясь так много всего. надеюсь, что это поможет

Ответ 4

Решение Zheileman работало для меня, и теперь мои вкладки с фонами CSS-изображений выглядят правильно на iPad. Просмотрите вкладки верхнего меню на http://www.meishapersonaltrainer.com на iPad для примера исправления в действии.

Мой PHP, который выполняет обнаружение и добавляет META, выглядит следующим образом

if (isset($_SERVER['HTTP_USER_AGENT']))
{
    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);
    if (strpos($ua, 'ipad') !== false || strpos($ua, 'ipod') !== false ||strpos($ua, 'iphone') !== false)
    {
        print '<meta content="width=device-width; initial-scale=1.0;" name="viewport" />';
    }
}

Ответ 5

Это общая практика управления стилями таблиц в Интернете, и это должно решить вашу проблему:

table { border-collapse: collapse; }

И вы можете удалить настройки полей для своих ячеек таблицы, они ничего не влияют.

Ответ 6

Я решил это странным образом.

Сначала я добавил <div> внутри каждой ячейки, которая испытывала эту проблему, если в ячейке есть содержимое, тогда убедитесь, что <div> после нее и не завершает содержимое. Затем я применил класс ios-table-fix к <div> и ios-table к любой из ячеек таблицы (<td>).

Затем я написал несколько CSS внутри медиа-запросов, которые нацелены на разрешение экрана iPad. Сначала я добавил следующее в ios-table:

overflow: hidden;
position: relative;

Далее я добавил в ios-table-fix следующее:

bottom: -1px;
left: -1px;
position: absolute;
right: -1px;
top: -1px;
z-index: 1;

Вы захотите применить position: relative; и z-index: 2; к любому содержимому внутри ячеек таблицы, иначе они исчезнут.

Это эффективно создает новый фон для ячейки таблицы, который переполняет проблему границы без изменения размера ячейки таблицы. Поскольку это только проблема с iPad, мы можем использовать CSS в теге <head>, чтобы не затрагивать все.

Я только проверял это кратко, но, похоже, работает, не вызывая проблем в другом месте.