Html 为 Internet Explorer 设计 hr
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2017227/
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
Styling a hr for internet explorer
提问by Qwibble
Hey, in my quest to create as image light a site as possible, I'm looking to create two tone hr's.
嘿，在我寻求创建尽可能轻的网站的过程中，我希望创建两种色调的 hr。
I've achieved this in modern browsers, but want to achieve the same effect in ie6 and 7.
我已经在现代浏览器中实现了这一点，但想在 ie6 和 7 中实现相同的效果。
The current code I am using is
我正在使用的当前代码是
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #dcdcdc;
clear:both;
height:0;
border-left:0px;
border-right:0px;
}
I've tried, with no success to make this work in ie6 and 7 without having to target the browsers specifically. Any thoughts?
我已经尝试过，但没有成功地在 ie6 和 7 中完成这项工作，而不必专门针对浏览器。有什么想法吗？
(Heres my current project where I am employing this code, and looking to make it cross browser - http://www.qwibbledesigns.co.uk/preview/aurelius/)
（这是我目前使用此代码的项目，并希望使其跨浏览器 - http://www.qwibbledesigns.co.uk/preview/aurelius/）
Cheers
干杯
Matt
马特
回答by matt
I havent seen any good answer for this but though my own work figured out the following code should work for styling a HR to look consistent in firefox, safari, chrome and IE (not sure if it works below IE7).
我还没有看到任何好的答案，但尽管我自己的工作发现以下代码应该可以使 HR 的样式在 firefox、safari、chrome 和 IE 中看起来一致（不确定它是否在 IE7 下工作）。
hr {
color:#bfbfbf; /*used for IE, top color*/
background:#bfbfbf; /*firefox and chrome, top color*/
min-height: 0px; /*required to get IE to render the top pixel color*/
border-left: 0px;
border-right: 0px;
border-top: 1px solid #bfbfbf; /*Your top color*/
border-bottom: 1px solid #ffffff; /*Your bottom color*/
}
回答by Abel
Try something like the following instead (and replace the <hr>with a <div>)
改为尝试类似以下内容（并<hr>用 a替换<div>）
div {
/* no need for border-left/right with the following: */
border: none;
border-bottom:1px solid #FFFFFF;
border-top:1px solid #dcdcdc;
clear:both;
height:0;
width: 100%;
}
(and don't forget to add an id or class to prevent all divs to look odd)
（并且不要忘记添加一个 id 或 class 以防止所有 div 看起来很奇怪）
NOTE: this works on IE7, IE8 and on compliant browsers. Probably needs more tweaking for the 10 year old IE6, or even needs an image-hack (as so often).
注意：这适用于 IE7、IE8 和兼容的浏览器。可能需要对 10 岁的 IE6 进行更多调整，甚至需要进行图像破解（通常如此）。
回答by Christian Augustine
If you're clients have already plastered the site with < hr > tags you can just style hr as well as the hr class then swap < hr > tags out for in ie6 and ie7.
如果您的客户已经在网站上贴上了 <hr> 标签，您可以只设置 hr 和 hr 类的样式，然后在 ie6 和 ie7 中交换 <hr> 标签。
Use the css posted by Abel:
使用 Abel 发布的 css：
hr, .hr {
/* no need for border-left/right with the following: */
border: none;
border-bottom:1px solid #FFFFFF;
border-top:1px solid #dcdcdc;
clear:both;
height:0;
width: 100%;
}
Then in your js file just put:
然后在你的 js 文件中输入：
if ($.browser.msie && $.browser.version.substr(0, 1) <= 7) {
$("hr").replaceWith('<div class="hr"></div>');
}
obviously jQuery is required for this fix, but it worked well for me.
显然，此修复程序需要 jQuery，但它对我来说效果很好。
回答by Y. Shoham
I think that the easiest way is to use <div class="hr"></div>instead. Styling <hr/>cross-browser is head-breaking, in my experience.
我认为最简单的方法是使用<div class="hr"></div>。<hr/>根据我的经验，跨浏览器样式是令人头疼的。
回答by Kriss
hr
{
/* hr css reset */
color: white; /* if parent element's background is white - old ie versions fix */
border: 0;
background: transparent;
height: 0;
margin: 0;
/* hr css reset end */
/* custom styles */
margin: 20px 0;
border-top: 1px solid red;
}
回答by teewuane
Setting height to 2px solved the issue for me.
将高度设置为 2px 为我解决了这个问题。
hr {
margin: 1em 0 1em 0;
border: none;
border-top: 1px solid #000;
height: 2px;
display: block;
}
