Кроссбраузерный <hr />. Статьи. wb0.ru - Все для веб-мастера, on-line сервисы

Кроссбраузерный <hr />

Горизонтальная линия (тег <hr />) такой простой элемент, а столько с ним проблем.

Цвет и отступы hr

Для устранения этих проблем используем CSS код:

  1. hr {  
  2. height: 1px;  
  3. border: none;  
  4. color: #ff0000;  
  5. background: #ff0000;  
  6. margin: 0; /* устраняем начальный отступ для всех браузеров (в ие6 не работает) */
  7. }  
  8. * html hr {/* хак для ие6 */
  9. margin: -7px 0; /* устраняем начальный отступ для ие6 */
  10. }

Для избежания хака и отдельного CSS для IE6 можно воспользоваться свойством float для hr:

  1. hr {  
  2. height: 1px;  
  3. border: none;  
  4. color: #ff0000;  
  5. background: #ff0000;  
  6. margin: 0;  
  7. float: left; /* чтобы в IE6 устранить отступ по умолчанию */
  8. width: 100%; /* плавающие элементы обязательно должны иметь явно указанную ширину */
  9. }

Чтобы задать одинаковый цвет для hr, можно воспользоваться и таким способом:

  1. hr {  
  2. height: 1px;  
  3. border: none;  
  4. border-top: 1px solid #000;  
  5. }

По умолчанию hr имеет выравнивание по центру. Выровнять влево/вправо не так очевидно как казалось.

Выравнивание hr влево

  1. hr {  
  2. height: 1px;  
  3. border: none;  
  4. width: 50%;  
  5. text-align: left; /* для ie */
  6. margin: 0 auto 0 0; /* для остальных браузеров */
  7. }

Выравнивание hr вправо

  1. hr {  
  2. height: 1px;  
  3. border: none;  
  4. width: 50%;  
  5. text-align: right; /* для ie */
  6. margin: 0 0 0 auto; /* для остальных браузеров */
  7. }

Бордюр для hr

hr может выглядеть не только сплошной линией, например, она может быть пунктирной:

  1. hr {  
  2. height: 1px;  
  3. border: none;  
  4. width: 50%;  
  5. border-top: 1px dotted #000;  
  6. }

Background для hr

  1. hr {  
  2. height: 1px;  
  3. border: none;  
  4. background: url(path-to/hr.png) no-repeat;  
  5. }

Все просто, за одним исключение - это не работает в IE. Поэтому приходится использовать <div>:

  1. .line {  
  2. height: 1px;  
  3. border: none;  
  4. background: url(path-to/hr.png) no-repeat;  
  5. overflow: hidden; /* для ie6, чтобы высота блока была 1px */
  6. }

Дата публикации: 06.07.2010
Евгений Рыжков,
xiper.net


Комментарии:
  1. Peter Winter: 555-555-0199@example.com
    Добавлен: 2017-10-27


   Ваш псевдоним:
Ваш комментарий:

Новости Интернет


Поиск




Наши партнеры




Последний пересчет

тИЦ:07 Окт 15
PR:09 Дек 13

Посетители

On-Line:14
Рекорд:1794
Зафиксирован:01 Окт 13

Наши партнеры

wservices.ru - регистрация доменов, Whois-сервисы Смайлы на все случаи жизни


Календарь событий


 
Copyright © 2006-2017, wb0.ru