Проблема следующая:
на сайте некорректно отображается линия именно в "мозиле", в других браузерах все идеально. Ниже приведен код 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.
"мозиле" высота = 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;
Пробовал ( 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".
Для "мазилы" height:2px;
Не знаю насчет "мазилы", но у меня в Firefox все в порядке с вашим стилем:
Вот мой сайт 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% - именно тогда линия показана та которая и нужна )) в остальных случаях линия просто черного цвета.
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
Все согласно спецификации. А вот почему другие браузеры на нее плюют и выводят фон поверх границы - вопрос.
Если в 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, чтоб другие чудить не начали.
Заработало так как надо - СПАСИБО!!!
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, выглядит именно так как нужно! 