Абсолютно позиционированный div не установлен правильно на mac/ios, но отлично работает на окнах

Question

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

У меня есть div, который расположен абсолютно внутри относительного div. Этот div имеет положение, изменяющееся от mac до pc.

скриншоте ниже на макинтоше

Ниже снимок экрана на Windows PC

Эта же проблема возникает на IOS устройств, а также и согласован между браузерами.

<div style="position:relative;" id="section3"> 
<div class="highheader" style=" font-size:42px;position:absolute; top:-8px; left:25px; color:black;" id="categoryname">VIDEO HIGHLIGHTS</div> 

Выше приведен фрагмент кода. По какой-то причине это просто интерпретирует верхний: -8px абсолютное значение, отличное от машин. Это то же самое для каждого div, который я создал таким образом. На моем сервере есть версия этого кода, где эта проблема происходит.

www.atomichael.com/mmaplus

Во всяком случае, я надеюсь, что информация, предоставленная ISS достаточно полезным, если он не пожалуйста, не стесняйтесь обращаться к нам для более подробной информации!

Я действительно в тупике, поэтому любая помощь будет действительно оценена. Спасибо.

Answer 1

Шрифты не являются стандартными. Кроме того, вы можете добавить отступы, высоту или высоту линии для некоторых настроек или даже настроить свою позицию. Я бы начал с шрифта. См:

http://www.w3schools.com/cssref/css_websafe_fonts.asp

Answer 2

Просто установите top:0px и он будет работать отлично подходит для следующих divs

<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px; color:black;" id="categoryname">VIDEO HIGHLIGHTS</div> 

<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px; color:black;" id="categoryname">LATEST NEWS</div> 

<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px;" id="categoryname">PLUS BABES</div> 

<div class="tileheader" style=" font-size:42px;position:absolute; top:0px; left:25px;" id="categoryname">LATEST POSTS</div> 

Другой вариант заключается в создании class и применять различные CSS для chrome и safari

Вероятно, этот хак может работать

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */ 
    .myClass { 
    top:-8px; 
    } 

    /* Safari only override */ 
    ::i-block-chrome,.myClass { 
    top:0px; 
    } 
} 

Это взято из here