CSS-фоны появляются на iOS

Question

У меня есть 3 div с фонами. Швы IOS для добавления белой линии между ними во всех форматах от iPhone до iPAD. Первоначально я думал, что это проблема с таблицами, но это относится и к div.

#cbtop {
    height:10px;
    background:url(http://www.golfbrowser.com/images/structure/cbmain.png) center top repeat-y;
}
#cbbottom {
    height:10px;
    background:url(http://www.golfbrowser.com/images/structure/cbmain.png) center bottom repeat-y;
}
#content {
    min-height:10px;
    background:url(http://www.golfbrowser.com/images/structure/cbmains.png) center top repeat-y;
}

видно здесь только на iOS - http://www.golfbrowser.com/courses/wentworth-east/

Есть идеи?

Marvelous

Answer 1

Эта белая линия на самом деле перекрывает два деления.Это проблема точности в Safari для iOS, и она практически неизбежна (imho).Эта проблема наиболее заметна при увеличении масштаба, так как это происходит при отсутствии точности.

Вы МОЖЕТ иметь возможность «обмануть» браузер в правильной работе с использованием полупикселя.верхнее поле на нижнем элементе ... Однако у меня нет возможности проверить это.

В этом случае я бы использовал радиус границы CSS для достижения того же эффекта ... хотя он не будет отображаться должным образомв всех браузерах вы все равно можете найти его приемлемым решением

#cb
{
    background: rgb(255,255,255); // fallback for browsers without alpha support
    background: rgba(255,255,255, 0.5);

    border-radius: 30px;
}

Существуют также версии свойства border radius для webkit и mozilla ... это поможет в кроссплатформенной совместимости.

Подробнее об альфа-прозрачности фона см. Здесь: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

См. JS Fiddle: http://jsfiddle.net/xixionia/4SYP4/