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

В мире Mozilla происходит много интересных событий. Но вам не нужно постоянно посещать новостные сайты, чтобы быть в курсе всех изменений. Зайдите на ленту новостей Mozilla Россия.

CSS-стили » CSS3 проблема отображения горизонтальной линии в mozilla firefox 39.0 » 02-08-2015 10:24:16

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

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:

CSS-стили » CSS3 проблема отображения горизонтальной линии в mozilla firefox 39.0 » 02-08-2015 05:31:33

Вот мой сайт 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% - именно тогда линия показана та которая и нужна )) в остальных случаях линия просто черного цвета.

CSS-стили » CSS3 проблема отображения горизонтальной линии в mozilla firefox 39.0 » 02-08-2015 04:47:52

Пробовал ( 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".

CSS-стили » CSS3 проблема отображения горизонтальной линии в mozilla firefox 39.0 » 01-08-2015 18:47:48

Проблема следующая:
на сайте некорректно отображается линия именно в "мозиле", в других браузерах все идеально. Ниже приведен код 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.

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]