Удаление стиля оформления <hr/"> на IE

Почему это простые вещи, которым IE удается повредить больше всего? В любом случае я хочу заменить нормальную линию hr на одно изображение, немного похожее на символ - § - (на его стороне). Попытка заставить его выглядеть элегантно:)

Кажется, единственный способ действительно избавиться от границы в IE, но это установить цвет: значение css. Выполнение этого будет отменять все, что установлено как фоновое изображение, к сожалению, и сделать весь hr параметром для цвета.

Невозможно обернуть его в div или даже действительно применить к нему класс, так как клиент, который будет использовать этот сайт, использует текстовый редактор wysiwyg, который мне действительно не нравится взломать, чтобы вставить div, завернутый в hr.

Я отступаю от добавления оболочки блока div с jquery, но это кажется принципиально неправильным (дробовик против грецкого ореха) - любые предложения?

Ответ 1

http://blog.neatlysliced.com/2008/03/hr-image-replacement/

<style type="text/css">
    hr {
       background: url(http://placekitten.com/800/100) no-repeat;
       border: 0;
       height: 100px;
       width: 100%;
    }
</style>
<!--[if IE 7]>
<style type="text/css">
    hr {
        display : list-item;
        list-style : url(http://placekitten.com/800/100) inside;
        filter : alpha(opacity=0);
        margin-left: -10px;
        width : 0;
    }
</style>
<![endif]-->

Посмотрите, как это работает: jsFiddle

Ответ 2

Ну, вы можете просто вставить изображение напрямую и не использовать < hr/ > тег. Тем не менее, я уверен, что вы можете избавиться от оскорбительной границы, просто изменив ее на цвет вашего фона. Я имею в виду, что это на самом деле не исчезло, но, по крайней мере, оно скрывается:

hr{
   border: #XXXXXX;
}

Ответ 3

IE8, к счастью, делает все правильно. Таким образом, есть надежда через 12 лет.

Если ваш цвет фона твердый, просто определите границу как этот цвет и он исчезнет.

Ответ 4

Вы можете изменить цвет границы на прозрачный - я думаю, что все равно будет работать.

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