Safari не дает значения margin-top%, как и другие браузеры

Я задал этот вопрос раньше, но подумал, что я буду более ясным. Похоже, что margin-top в% значение не отображается на Сафари, как в Chrome, Firefox и IE. В пикселях он отображается правильно и margin-left% также.Safari не дает значения margin-top%, как и другие браузеры

Вот пример для сравнения: Fiddle

* { 
    margin:0; 
    padding:0; 
} 

.A { 
    background-color: blue; 
    height: 200px; 
    position:relative; 
} 

.B { 
    left: 50px; 
    margin-top:15%; 
    width:20px; 
    height:20px; 
    background-color: red; 
    position:absolute; 
}

мне действительно нужно использовать значение% на margin-top как для отзывчивым элемента дизайна. Использование top не масштабирует объект в соответствии с размером окна.

Есть ли известные проблемы, и если да (возможно, задание большой вещи) способ использовать только Safari в качестве браузера, поэтому у меня могут быть пользовательские значения для таблицы стилей?

источник

2013-06-29 chucky

Какая у вас версия Safari? он работает на меня. Btw, если вы хотите масштабировать объект в соответствии с размером окна, вы можете использовать 'relative' с последней версией' top' –

. Даже если вы открываете два браузера рядом? Красный блок находится в другом положении при сравнении. – chucky

Вы правы. Хром устраивает положение в соответствии с размером окна, но сафари организует pos в соответствии с контейнером. Я думаю, что Safari работает исправно, другие работают неправильно, потому что позиция «абсолютная». Я думаю, вы должны изменить то, как вы работаете. [этот пример] (http://jsfiddle.net/VR52j/) работает на хром и сафари. –

Да, согласно стандартам W3C, поле определяется с использованием проценты должны быть рассчитаны по отношению к ширине содержащего блока.

Ссылка: (http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties)

Тем не менее, оказалось, что Сафари вычисляет верхнее/нижнее поле проценты по отношению к высоте содержащего блока, что делает более логический смысл, но тем не менее, неверно, как как стандарты W3.

Я не верю, что для этого есть решение CSS. Вы можете попробовать jQuery, чтобы настроить только Safari, получить ширину div.A и использовать его для вычисления margin-top для div.B.

Что-то вроде:

var width = $('.A').width(); 
    var topMargin = width * 0.15; 
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {     
     $('.B').css('margin-top', topMargin+'px') 
    } 
    else { 
    };;

Вот пример страницы: http://www.indieweb.co.nz/testing/safari-margin-percentage.html

Примечание: Этот JS изменяет только маржу при загрузке страницы - это не будет динамически изменяться, если вам вручную перетащите края окна вашего браузера; вам нужно будет обновить страницу. Не был уверен, что вам нужна эта функциональность. Дайте мне знать, если вы это сделаете, и я посмотрю.

источник

2013-06-30 09:53:48 Luke

Спасибо Люку. Эта функциональность была бы приятной, но я могу просто добавить ее в функцию $. (Resize) .resize (function() {} '. Как вы дошли до значения 0,15? – chucky

Конечно, я пропустил это как-то 0.15 умноженное на ширину div.A дает вам 15% от этой ширины. Это то, что ты хотел, да? – Luke

Да, я вижу. У меня так много полей, что я занимаюсь написанием функции, чтобы захватить все% от полей и преобразовать их. Я передал вопрос Apple, и это действительно глупо делать это. – chucky

Safari не дает значения margin-top%, как и другие браузеры

ответ

Смежные вопросы