| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Зробити горизонтальну лінію на сторінці.
Рішення
Горизонтальні лінії добре використовувати для відділення одного блоку текст від іншого. Невеликий за розміром текст, зверху та знизу якого розташовуються горизонтальні лінії, привертає більше уваги читача, ніж звичайний текст.
З допомогою тега <hr> можна намалювати горизонтальну лінію, вигляд якої залежить від використовуваних атрибутів, а також браузера. Тег відноситься до блочних елементів, тому лінія завжди починається з нового рядка, а після неї всі елементи відображаються на наступному рядку. Завдяки безлічі атрибутів тега <hr> лінією, створеної через цей тег, легко управляти. Якщо ще підключити міць стилів, то додавання лінії в документ перетворюється в просте заняття.
За замовчуванням лінія <hr> відображається сірого кольору і з ефектом об'єму. Такий вид лінії не завжди підходить до дизайну сайту, тому зрозуміло бажання розробників змінити колір та інші параметри лінії через стилі. Однак браузери неоднозначно підходять до цього питання, з-за чого доводиться використовувати відразу кілька стильових властивостей. Зокрема, старі версії браузера Internet Explorer для кольору лінії застосовують властивість color, а інші браузери — background-color. Але це ще не все, при це обов'язково слід вказати товщину лінії (властивість height) відмінної від нуля і прибрати рамку навколо лінії, задаючи значення none у властивості border. Збираючи воєдино всі властивості для селектора hr, отримаємо універсальне рішення для популярних браузерів (приклад 1).
Приклад 1. Горизонтальна лінія
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset="utf-8">
<title>Колір горизонтальної лінії</title>
<style>
hr {
border: none; /* Прибираємо кордон */
background-color: red; /* Колір лінії */
color: red; /* Колір лінії для IE6-7 */
height: 2px; /* Товщина лінії */
}
</style>
</head>
<body>
<hr>
<p>Текстовий рядок</p>
<hr>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Кольорова горизонтальна лінія