在IE浏览器中去除<hr/>边框样式

Question

为什么IE总是会搞砸那些简单的事情呢？无论如何，我想用一个像 - § - 符号（侧着的）一样的单个图像来替换普通的hr线。试图让它看起来优雅 :)。

显然，实际上消除IE中的边框唯一的方法是设置颜色:CSS值。但不幸的是，这样做将覆盖设置的任何背景图片，并使整个hr成为颜色参数。

不可能将其包装在div中，甚至不可能真正地将类应用于它，因为将使用wysiwyg文本编辑器的客户端不希望自己去插入一个div包装的hr。

我离添加具有jquery的div块包装器只差一步之遥，但那似乎基本上是错误的（猎枪vs核桃）- 有什么建议吗？

- Meep3D

Answer 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

- Detect

---

简直太巧妙了！ 想出这个主意的人在 CSS 方面比我更擅长！ - Meep3D

Answer 2

嗯，你可以直接插入图片而不使用 <hr /> 标签。然而，我相当确定你可以通过将其更改为与你的背景颜色相同来消除问题边框。我的意思是，它实际上并没有消失，但至少它被隐藏了：

hr{
   border: #XXXXXX;
}

- Peter

---

不幸的是，IE不认为HR边框是“边框”。如果您设置border: 1px #f0f solid;，它将在现有的斜面边框周围添加一个紫红色边框。FF + IE8表现良好，并且实际上意识到border: 0;表示我不想要边框-IE 7及以下版本则不然。 - Meep3D

Answer 3

IE8 做事情正确，幸运的是。所以在 12 年后还有希望。

如果您的背景颜色是实心的，只需将边框定义为该颜色，它就会消失。

- Ryan Florence

---

几乎可以说，IE在胜利的咀嚼中 snatch defeat，因为它将边框颜色（如果使用color：设置）放在背景图像的顶部。这让人难以置信。我知道，我感觉自己会一直编写针对IE6“标准”的代码，直到我死去。 - Meep3D

Answer 4

你可以将边框颜色改为透明 - 我认为这样会起作用。

否则，你应该直接使用图片并且放弃使用 <hr /> 标签。

- Eugene Bulkin