Html 删除 IE 上的 <hr /> 边框样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1070682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing the <hr /> border styling on IE
提问by Meep3D
Why is it the simple things that IE manages to mess up the most? Anyway I want to replace a normal hr line with a single image a bit like the - § - symbol (on its side). Trying to make it look elegant :)
为什么 IE 最容易搞砸的最简单的事情是什么？无论如何，我想用单个图像替换普通的 hr 行，有点像 - § - 符号（在其一侧）。试图让它看起来优雅:)
It appears the only way to actually get rid of the border in IE though is to set the color: css value. Doing this will override whatever is set as background-image unfortunately and make the whole hr the parameter for color.
似乎在 IE 中真正摆脱边框的唯一方法是设置 color: css 值。不幸的是，这样做将覆盖设置为背景图像的任何内容，并使整个 hr 成为颜色参数。
It's not possible to wrap it in a div or even really apply a class to it as the client that will be using the site is using a wysiwyg text editor which I don't really relish hacking to insert a div wrapped hr.
不可能将它包装在一个 div 中，甚至无法真正将一个类应用于它，因为将使用该站点的客户端正在使用所见即所得的文本编辑器，我真的不喜欢黑客插入一个 div 包装的 hr。
I am one step away from adding a div block wrapper with jquery, but that seems fundamentally wrong (shotgun vs walnut) - any suggestions?
我离使用 jquery 添加 div 块包装器仅一步之遥，但这似乎根本错误（shotgun vs walnut） - 有什么建议吗？
回答by Detect
http://blog.neatlysliced.com/2008/03/hr-image-replacement/
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]-->
See it working here: jsFiddle
看到它在这里工作：jsFiddle
回答by Peter
Well, you could just insert the image directly and not use an <hr /> tag. However, I'm fairly certain you can get rid of the offending border by just changing it to be the color of your background. I mean, it's not actually gone, but at least it's hiding:
好吧，您可以直接插入图像而不使用 <hr /> 标签。但是，我相当肯定您可以通过将其更改为背景颜色来摆脱有问题的边框。我的意思是，它实际上并没有消失，但至少它正在隐藏：
hr{
border: #XXXXXX;
}
回答by Ryan Florence
IE8, fortunately does things properly. So there is hope in 12 years.
IE8，幸运的是做事正确。所以12年后还是有希望的。
If your background color is solid, just define the border as that color and it disappears.
如果您的背景颜色是纯色，只需将边框定义为该颜色，它就会消失。
回答by Eugene Bulkin
You could change the color of the border to transparent - I think that'll work, anyway.
您可以将边框的颜色更改为透明 - 我认为无论如何都可以。
Otherwise you should just use the image itself and scrap the <hr /> tag.
否则，您应该只使用图像本身并废弃 <hr /> 标签。
