Проблемы с отображением фонового изображения в Mobile Safari (iPad) - PullRequest
1 голос
/ 15 января 2011

У меня возникают простые, но неожиданные проблемы с рендерингом при просмотре моей веб-страницы с помощью Mobile Safari и iOS.

По сути, на моей странице есть вкладки, которые состоят из трех элементов div и элемента href внутриЦентр Div вкладки.Div по сторонам содержат фон, а в центре ссылка имеет изображение.По какой-то причине фон в href отображает горизонтальные желтые линии в Mobile Safari:

http://i.stack.imgur.com/jlKHf.jpg

В то время как в настольных браузерах он работает нормально:

[не смогдобавить еще одну ссылку, она должна быть белесой]

.TabPanelLinks_true {
    background: url(".../seltab-center.jpg") repeat-x scroll 0 0 transparent;
}

.TabPanelElement a {
    color: #5C5C5C;
    cursor: pointer;
    display: block;
    font-family: arial,helvetica,clean,sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 22px;
    margin: 0;
    padding: 0 5px;
    text-align: center;
    text-decoration: none;
}

Я пробовал с другим изображением, но безуспешно.Я попытался добавить фон к центру div, но безуспешно.Есть идеи, что происходит?

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 30 июля 2014

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

Смещение пикселов в одном / субпикселях divs на ipad и iphone safari

Следуя советам кого-то изэтот поток, я добавил это

border: 1px solid transparent;

в div, который получал странные строки, и это исправило это.

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

Хотелось бы, чтобы был способ поэкспериментировать с этим, поскольку у меня нет iPad - но, возможно, укажите border : none;?

Вы можете попробовать один div с «концами» вкладки в качестве абсолютно позиционированных изображений для left : 0 и right : 0 ... альтернативного метода, который не должен выглядеть иначе, но может решить проблему ? Если вам нужен прозрачный фон на вкладке «Графика», вы можете расположить изображения вне div и соответственно настроить поля / отступы.

...