Question

为什么IE最容易陷入困境？无论如何，我想用单个图像替换正常的hr线，有点像 - § - 符号（在它的侧面）。试图让它看起来优雅：）

看来实际摆脱IE中边框的唯一方法是设置color：css值。这样做会不幸地覆盖设置为背景图像的任何内容，并使整个hr成为颜色的参数。

不可能将它包装在div中，甚至不能真正将类应用于它，因为将使用该站点的客户端正在使用所见即所得的文本编辑器，我并不喜欢黑客插入div包裹的hr。

我距离添加带有jquery的div块包装器只有一步之遥，但这似乎从根本上说是错误的（猎枪与核桃） - 任何建议？

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

Answer 2

嗯，您可以直接插入图片而不是使用＆lt; hr /＆gt;标签。但是，我相当肯定你可以通过将它改为背景颜色来摆脱有问题的边界。我的意思是，它实际上并没有消失，但至少它正在隐藏：

hr{
   border: #XXXXXX;
}

Answer 3

IE8，幸运的是做得不错。所以有12年的希望。

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

Answer 4

您可以将边框的颜色更改为透明 - 我认为无论如何都会有效。

否则你应该只使用图像并废弃＆lt; hr /＆gt;标签

删除IE上的<hr />边框样式

4 个答案: