Горизонтальная линия с использованием HTML/CSS

Я пытаюсь получить горизонтальную линию для работы на моем блоге, но у меня возникают проблемы с отображением строки в google chrome (IE и Firefox отлично ее отображают).

В принципе, в моем CSS у меня есть следующее:

div.hr {
background: #fff  no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}

div.hr hr {
display: none;
}

В моем HTML у меня есть что-то вроде:

<div class="hr"><hr /></div>

По какой-то причине в google chrome строка просто не существует. Проблема в том, что у меня их много (около 25):

и поэтому я хочу изменить только мой CSS, чтобы я мог внести минимальные изменения в свой HTML.

При поиске в Google, я вижу, что у многих была эта проблема, но похоже, что нет правильного решения (не считая "рисование" строки и вставка строки в виде рисунка!).

Я был бы признателен, если бы кто-то мог указать мне в правильном направлении, чтобы решить вышеуказанную проблему.

Большое спасибо.

Ответ 1

Это может быть ваша проблема:

height: .05em;

Chrome немного фанк с десятичными знаками, поэтому попробуйте высоту фиксированного пикселя:

height: 2px;

Ответ 2

Я попробовал этот новый код, и он может быть вам полезен, он отлично работает в google chromr

hr {
     color: #f00;
     background: #f00; 
     width: 75%; 
     height: 5px;
}

Ответ 3

Или измените его на height: 0.1em; orso, минимальный размер всего отображаемого - 1px.

0.05 em вы используете средства, получите текущий размер шрифта в пикселях этих элементов и дайте мне 5% от него. Что для 12 пикселей возвращает 0,6 пикселей, что слишком мало для отображения. если бы вы увеличили размер шрифта div до 20 пикселей, он отобразится отлично. Я полагаю, что Chrome не округляет размеры, чтобы быть по крайней мере 1pixel, где делают другие браузеры.

Ответ 4

вы также могли бы сделать это таким образом, в моем случае я использую его до и после h1 (грубая сила его ehehehe)

.titleImage::before {
content: "--------";
letter-spacing: -3px;
}

.titreImage::after {
content: "--------";
letter-spacing: -3px;
}

Если расстояние между буквами делает это так, чтобы строка попадала в текст, просто используйте маржу, чтобы оттолкнуть ее!