Пустой div получает мнимую границу в браузере iPad / iPhone (Safari) - PullRequest
1 голос
/ 09 сентября 2011

У меня есть страница, содержащая пустой div с градиентом, например:

<div class="prodGradientArea"></div>

.prodGradientArea {
    background: -moz-linear-gradient(center bottom , #ECEAE9 0%, #E4E3E2 50%) repeat scroll 0 0 transparent;
    display: inline-block;
    float: left;
    height: 10px;
    width: 420px;
}

Это прекрасно смотрится в FF, IE, Chrome и Safari ... на компьютере. При проверке в Safari на iPad или iPhone я получаю крошечную рамку вокруг div. Это удаляется, если я пишу текст в поле или если я увеличиваю масштаб, но не если я пишу неразрывный пробел. Я даже пытался вставить прозрачный пиксель, но это не имело никакого значения для воображаемой границы. Также попытался установить border = 0, но это, конечно, не проблема (это не настоящая граница, просто визуальная «функция»).

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

Пожалуйста, помогите!

Дженни

1 Ответ

3 голосов
/ 01 ноября 2011

Вставьте в ваш index.php этот код в <head> -области, чтобы избежать артефактов из-за неправильной интерпретации масштаба iOS:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Затем перейдите к вашему css-файлу и вставьте 1px отрицательное поле, чтобы избежать этого. На моем сайте это был нижний колонтитул:

.unten {
    margin-top: -1px;
}

Надеюсь, это вам тоже поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...