CSS3 проблема отображения горизонтальной линии в mozilla firefox 39.0

kos198205 · №1

Проблема следующая:
на сайте некорректно отображается линия именно в "мозиле", в других браузерах все идеально. Ниже приведен код CSS (CSS3) линии:

hr{border-top:1px solid #171616;background:url(images/headbg.png) 100%;height:1px;}

Для нормального отображения линии для браузера "МОЗИЛА" нужно прописывать высоту линии 2 px, для других браузеров высота линии 1 px. То есть если ставить высоту 2 пиксела, то в "мозиле" данная линия идеально отображается, а в остальных браузерах визуальный эффект уже не тот.

Не помогли ниже указанные коды:

hr{border-top:1px solid #171616;background:url(images/headbg.png) 100%;-moz-height:2px;}

или

hr{border-top:1px solid #171616;background:url(images/headbg.png) 100%;height:1px;-moz-height:2px;}

Прошу помочь, как правильно, точнее отдельно прописать СТИЛЬ для "мозилы" - height:2px? Именно в файле css (style.css).

PS В "мозиле" высота = 2px, в остальных браузерах высота = 1px.

turbot · №2

kos198205 пишет

"мозиле" высота = 2px

В инспектор заглянуть не пробовали?

Выделить код

Код:

border-width: 1px 0 0 0; border-style: solid; border-color: #171616; background:url(images/headbg.png) 100%; height:1px;

либо

Выделить код

Код:

border none; border-top:1px solid #171616; background:url(images/headbg.png) 100%; height:1px;

kos198205 · №3

Пробовал ( border-width: 1px 0 0 0; ) и ( border none; ) ничего не изменилось. Именно height:1px или height:2px изменяют линию.

У меня в стилях (style.css) линия hr прописана "дважды":

hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0;}
hr{border-top:1px solid #171616;background:url(images/headbg.png) 100%;height:1px;}

такая запись дает нужный эффект линии во всех браузерах, кроме "мазилы". Для "мазилы" height:2px; тогда в других браузерах картинка PNG соответственно на 1 пиксель по высоте толще и нет того визуального эффекта - "прореза в самой линии hr".

turbot · №4

kos198205 пишет

Для "мазилы" height:2px;

Не знаю насчет "мазилы", но у меня в Firefox все в порядке с вашим стилем:

Отредактировано turbot (02-08-2015 05:12:27)

kos198205 · №5

Вот мой сайт ducenti ru и сейчас стиль такой:

hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0;}
hr{border-top:1px solid #171616;background:url(images/headbg.png) 100%;height:1px;} - в Firefox линия отображается полностью черной. В других браузерах с "металлической прорезью".

Линия "проблемная" внизу сайта расположена над счетчиками посетителей - яндекса и mail.
Может версия браузера Firefox "старая" на моем компьютере 39.0 ...?

Если в Firefox увеличить страницу на 150% - именно тогда линия показана та которая и нужна )) в остальных случаях линия просто черного цвета.

turbot · №6

kos198205
Я думаю, потому-что:

border-box
The background extends to the outside edge of the border (but underneath the border in z-ordering).

https://developer.mozilla.org/en-US/doc … round-clip
Все согласно спецификации. А вот почему другие браузеры на нее плюют и выводят фон поверх границы - вопрос.

kos198205 пишет

Если в Firefox увеличить страницу на 150% - именно тогда линия показана та которая и нужна ))

А вот это, как раз баг - она в этом случае становится 1.5px высотой, при этом сама граница становится 0.666667*150%(увеличение) + фон 0.333333*150%.

Добавлено 02-08-2015 06:08:53
Задайте ей box-sizing: content-box; и будет как вы хотите (если правильно понял). Или -moz-box-sizing: content-box, чтоб другие чудить не начали.

Отредактировано turbot (02-08-2015 06:08:53)

kos198205 · №7

Заработало так как надо - СПАСИБО!!!

hr{border-top:1px solid #171616;background:url(images/headbg.png) 100%;height:1%;box-sizing:content-box;}

Дополнительно заменил height:1px; на height:1%; - ни на что это визуально не влияет, так на всякий случай.
Проверил ранее "проблемную линию" hr в смартфонах, планшетниках, браузерах - Firefox, Chrome, Яндекс.Браузер, Uran, Opera, IE, выглядит именно так как нужно! :rock:

Полезная информация

№101-08-2015 18:47:48