Поиск 

Тег  <hr> и кроссбраузерный отступ

Четверг, Декабрь 17, 2009 г.
Сколько себя помню, во время верстки я не особо любил использовать тег <hr />, выводящий горизонтальную линию, по причине того, что в браузере Internet Explorer по сравнению с другими современными браузерами отступы (CSS-свойство margin) отличаются.

Не знаю, почему я раньше не задавался целью найти ответ на данный вопрос в виде кроссбраузерного решения, но недавно я все-таки сделал это.

На одном из англоязычных форумов я нашел информацию, которая гласила о том, что Internet Explorer делает размер отступа к тегу <hr /> больше ровно на 7 пикселей, чем другие браузеры.

Чтобы 100% убедиться в правдивости этих слов, я решил провести небольшой тест, который и подтвердил, что IE действительно добавляет к отступу от этого тега лишние ровно 7 пикселей.

Тест 1

Подготовлено специальное фоновое изображение с двумя линиями высотой в 7 пикселей и расстоянием между ними в 1 пиксель – место под линию, получаемую тегом <hr />. Для наглядность я поместил линию в div, которому указал границу серого цвета:

div#hr {
 border: 1px solid silver;
 width: 300px;
 background: url(hr-bg.gif) 100% 0 no-repeat;
}

Задаем для тега <hr /> отступ сверху и снизу в размере 7 пикселей (margin: 7px 0):

hr {
 margin: 7px 0;
 height: 1px;
 border: none;
 background: #F00;
 color: #F00; /* цвет линии в IE */
}

Результат в Opera, FireFox, Safari/Win:



В Internet Explorer 6 и 7 мы видим совсем другую картину:



Тест 2

Теперь уменьшим отступ в браузере Internet Explorer на заявленные выше 7 пикселей путем создания дополнительного правила только для IE:

* html hr {margin: 0; /* для IE6 */}
*+html hr {margin: 0; /* для IE7 */}

В результате получаем одинаковый отступ у тега <hr /> во всех браузерах:



Данный метод сработает также и в том случае, если задать для IE отрицательный отступ (на случай, когда в браузерах, отличных от IE, необходимо установить тегу <hr /> отступ меньше 7 пикселей).

Таким образом, применив этот небольшой трюк, мы “укротили” Internet Explorer, заставив его правильно позиционировать тег <hr />, аналогично другим браузерам.
Взято с www.dimox.name
Теги: CSS | Internet Explorer | Браузер | Верстка Автор: Xenta | Просмотров: 2961 | Нет комментариев | print |

Похожие статьи

все похожие статьи 
Категории
ТОП 10 - Авторы
  1     Луна   1964     2.93   
  2     pobeda   487     2.96   
  3     Tais   444     3.11   
  4     Foma   139     2.92   
  5     Lubov   52     2.91   
  6     Angel   45     2.93   
  7     Dolores   45     2.77   
  8     Paradiz   31     2.84   
  9     Xenta   29     2.85   
  10     Pryanik   26     2.8   
все авторы 
Последние статьи

Торт Пьяная вишня

Понедельник, Апрель 01, 2019 г.
|
Луна | 1471 |

Вода

Среда, Январь 24, 2018 г.
|
Луна | 942 |

Фруктовые соки

Среда, Январь 24, 2018 г.
|
Луна | 808 |

Вода и жизнь

Среда, Январь 24, 2018 г.
|
Луна | 1362 |

Голубцы с грибами

Среда, Январь 24, 2018 г.
|
Луна | 1374 |
Популярные статьи

Мавритания

Понедельник, Март 14, 2011 г.
|
Луна | 6262 |
|
pobeda | 70069 |

Материки

Вторник, Май 11, 2010 г.
|
Tais | 327496 |

Айшвария Рай - биография

Вторник, Ноябрь 02, 2010 г.
|
pobeda | 39018 |

Облако тегов