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