CSS: проблема с маржей в Safari

На сайте, над которым я работаю, по какой-то причине требуется поле отличаться для Safari от FF, IE8, Chrome и Opera? У меня есть ссылка, которую я хочу разместить рядом с ярлыком. Он отлично выравнивается во всем, кроме Safari, которому нужна разница в 12 пикселей. Вот снимок экрана, чтобы лучше описать проблему: Нажмите

На снимке экрана Safari метка опущена слишком низко. Это CSS, который я использую для рабочих 4 браузеров:

.submitter a {
    float: right;
    margin: -2px 0 0 2px;
    padding: 0 !important;
}

А вот код, который работает для Safari, однако при его использовании ссылка увеличивается на 12 пикселей вверх.

.submitter a {
    float: right;
    margin: -14px 0 0 2px; Works in Safari & Chrome
    padding: 0 !important;
}

Кто-нибудь может пролить свет на это? ТИА


css safari margins
person J. Scott Elblein    schedule 24.03.2011    source источник
comment
Внимание, это происходит и в Chrome 10 под Ubuntu.   -  person BStruthers    schedule 24.03.2011

Ответы (4)


arrow_upward
2
arrow_downward

Это, кажется, разобраться:

.submitter a {
    float: none;
    display: inline !important;
    margin: 0 0 0 2px;
}

Это действительно очень запутанно из-за бессмысленного использования каскада.

Некоторые правила применяются к элементам, где их действительно не должно быть из-за таких селекторов, как:

.box_777 ul li a

Вам лучше заменить этот селектор чем-то вроде:

.individual-likes > a

Но трудно предсказать, как улучшение ваших селекторов повлияет на отображение вашей страницы.

person thirtydot    schedule 24.03.2011
comment
Это сделало свое дело. Спасибо. И я не мог не согласиться с сверток. Наконец-то изучаю CSS более глубоко, чем небольшие настройки, так что это мой обучающий сайт, лол. - person J. Scott Elblein; 24.03.2011
comment
Без проблем. Просто чтобы убедиться, какие браузеры вы пробовали? Я тестировал только в Firefox и IE8. - person thirtydot; 24.03.2011
comment
До сих пор я тестировал исправление в FF3 (последняя), IE8, Opera 11 и Safari 5, все на Win7 x64. Я еще не проверял Chrome 10 в Ubuntu или IE7, как упоминалось ранее @bstruthers и @derek hunziker. - person J. Scott Elblein; 24.03.2011

arrow_upward
0
arrow_downward

Причина, по которой он так растет, может быть из-за значения -пикселя. Правильно ли они вложены в div? И применяли ли вы такое же выравнивание (CSS, Html и т. д.) для кнопок Chrome?

person Ator    schedule 24.03.2011

arrow_upward
0
arrow_downward

Происходит много всего, но вы можете попробовать одно из следующих действий:

.submitter .smalltext { float: left; }

(or)

Переместите тег привязки «follow» перед диапазоном «smalltext»

person Derek Hunziker    schedule 24.03.2011

arrow_upward
0
arrow_downward

Глядя на сайт, якорь устанавливается на block на .box_777 ul li a, а затем перемещается вправо на .submitter a.

Если я удалю display: block; и float: right;, все выровняется.

person BStruthers    schedule 24.03.2011