Styling hr для интернет-проводника - PullRequest
Новая
       4

Styling hr для интернет-проводника

11 голосов
/ 07 января 2010

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

Я достиг этого в современных браузерах, но хочу добиться того же эффекта в ie6 и 7.

Текущий код, который я использую: 

hr {
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    border-left:0px; 
    border-right:0px;
}

Я пытался, но безуспешно заставить это работать в ie6 и 7 без необходимости специально нацеливать браузеры. Есть мысли?

(Вот мой текущий проект, где я использую этот код и пытаюсь сделать его кросс-браузерным - http://www.qwibbledesigns.co.uk/preview/aurelius/)

Приветствия

Мэтт

Ответы [ 6 ]

21 голосов
/ 08 декабря 2010

Я не нашел хорошего ответа на этот вопрос, но, хотя моя собственная работа выяснила, что следующий код должен работать для стилизации HR, чтобы он выглядел согласованно в Firefox, Safari, Chrome и IE (не уверен, работает ли он ниже IE7). 

hr {
    color:#bfbfbf; /*used for IE, top color*/
    background:#bfbfbf; /*firefox and chrome, top color*/
    min-height: 0px;  /*required to get IE to render the top pixel color*/
    border-left: 0px; 
    border-right: 0px; 
    border-top: 1px solid #bfbfbf; /*Your top color*/
    border-bottom: 1px solid #ffffff; /*Your bottom color*/
}
13 голосов
/ 07 января 2010

Вместо этого попробуйте что-то вроде следующего (и замените <hr> на <div>) 

div {
    /* no need for border-left/right with the following: */
    border: none;
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    width: 100%;
}

(и не забудьте добавить идентификатор или класс, чтобы все div выглядели странно)

ПРИМЕЧАНИЕ: это работает в IE7, IE8 и в совместимых браузерах. Вероятно, нуждается в доработке для 10-летнего IE6 или даже требует взлома изображений (как это часто бывает).

4 голосов
/ 18 февраля 2011

Если ваши клиенты уже обклеили сайт тегами

, вы можете просто обозначить hr и класс hr, а затем заменить теги
на ie6 и ie7.

Используйте CSS, отправленный Авелем: 

hr, .hr {
    /* no need for border-left/right with the following: */
    border: none;
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    width: 100%;
}

Тогда в вашем файле js просто введите: 

if ($.browser.msie && $.browser.version.substr(0, 1) <= 7) {
    $("hr").replaceWith('<div class="hr"></div>');
}

Очевидно, что для этого исправления требуется jQuery, но у меня он работал хорошо.

2 голосов
/ 07 января 2010

Я думаю, что самый простой способ - использовать <div class="hr"></div>. Стайлинг <hr/> кроссбраузер, по моему опыту, ломает голову.

1 голос
/ 07 января 2014 
hr 
{ 
  /* hr css reset */
  color: white; /* if parent element's background is white - old ie versions fix */ 
  border: 0; 
  background: transparent; 
  height: 0;
  margin: 0;
  /* hr css reset end */
  /* custom styles */
  margin: 20px 0;
  border-top: 1px solid red; 
}
0 голосов
/ 20 июня 2013

Установка высоты в 2px решила проблему для меня. 

hr {
    margin: 1em 0 1em 0;
    border: none;
    border-top: 1px solid #000;
    height: 2px;
    display: block;
}
...