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

Список ответов на каверзные вопросы можно получить в FAQ-разделе форума.
  • Форумы
  •  » CSS-стили
  •  » CSS3 проблема отображения горизонтальной линии в mozilla firefox 39.0

№101-08-2015 18:47:48

kos198205
Участник
 
Группа: Members
Зарегистрирован: 01-08-2015
Сообщений: 4
UA: Chrome 41.0

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

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

Отсутствует

 

№202-08-2015 03:43:01

turbot
Участник
 
Группа: Members
Зарегистрирован: 09-10-2011
Сообщений: 2529
UA: Firefox 42.0

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

kos198205 пишет

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

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

Выделить код

Код:

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;

Отсутствует

 

№302-08-2015 04:47:52

kos198205
Участник
 
Группа: Members
Зарегистрирован: 01-08-2015
Сообщений: 4
UA: Firefox 39.0

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

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

Отсутствует

 

№402-08-2015 05:11:40

turbot
Участник
 
Группа: Members
Зарегистрирован: 09-10-2011
Сообщений: 2529
UA: Firefox 42.0

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

kos198205 пишет

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

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

idontnow.gif

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

Отсутствует

 

№502-08-2015 05:31:33

kos198205
Участник
 
Группа: Members
Зарегистрирован: 01-08-2015
Сообщений: 4
UA: Firefox 39.0

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

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

Отсутствует

 

№602-08-2015 05:59:46

turbot
Участник
 
Группа: Members
Зарегистрирован: 09-10-2011
Сообщений: 2529
UA: Firefox 42.0

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

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)

Отсутствует

 

№702-08-2015 10:24:16

kos198205
Участник
 
Группа: Members
Зарегистрирован: 01-08-2015
Сообщений: 4
UA: Firefox 39.0

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

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

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

Board footer

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