Создание hr для интернет-исследователя

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

Я достиг этого в современных браузерах, но хочу добиться такого же эффекта в 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 без необходимости настраивать браузеры специально. Любые мысли?

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

Приветствия

Matt

Ответы

Ответ 1

Попробуйте что-то вроде следующего (и замените <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%;
}

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

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

Ответ 2

Я не видел никакого хорошего ответа для этого, но, хотя моя собственная работа показала, что следующий код должен работать для стилизации 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*/
}

Ответ 3

Если вы клиенты уже оштукатурили сайт с помощью <hr> , вы можете просто создать hr, а также класс hr, затем swap <hr> метки для в ie6 и ie7.

Используйте css, отправленный Abel:

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, но он работал хорошо для меня.

Ответ 4

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

Ответ 5

hr 
{ 
  /* hr css reset */
  color: white; /* if parent element 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; 
}

Ответ 6

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

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