CSS проблема на iPad с границей стола - PullRequest
Новая
       3

CSS проблема на iPad с границей стола

11 голосов
/ 08 октября 2010

У меня проблема с 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);
}

Ответы [ 6 ]

7 голосов
/ 22 ноября 2011

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

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

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

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

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

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

Спасибо iPad.

7 голосов
/ 10 июня 2011

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

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

Надеюсьпомогает.

3 голосов
/ 31 октября 2011

Решение Жейлемана сработало для меня, и теперь мои вкладки с фоновыми изображениями 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" />';
    }
}
3 голосов
/ 13 октября 2011

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

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

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

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

0 голосов
/ 22 ноября 2013

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

Сначала я добавил <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>, чтобы не влиять на все.

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

0 голосов
/ 11 января 2011

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

table { border-collapse: collapse; }

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

...