为 Internet Explorer 设计 hr答案

【问题标题】：Styling a hr for internet explorer为 Internet Explorer 设计 hr
【发布时间】：2011-01-02 07:11:06
【问题描述】：

嘿，在我尽可能创建图像光的网站的过程中，我正在寻找创建两个色调的小时。

我已经在现代浏览器中实现了这一点，但想在 ie6 和 7 中实现相同的效果。

我当前使用的代码是

hr {
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    border-left:0px; 
    border-right:0px;
}

我已经尝试过，但没有成功地在 ie6 和 7 中进行这项工作，而无需专门针对浏览器。有什么想法吗？

（这是我目前正在使用此代码的项目，并希望使其跨浏览器 - http://www.qwibbledesigns.co.uk/preview/aurelius/）

干杯

马特

【问题讨论】：

离题 - 看起来大部分网站都是占位符，但您可能需要注意“专业”拼写错误。

标签： html css internet-explorer-7 internet-explorer-6

【解决方案1】：

我还没有看到任何好的答案，但是虽然我自己的工作发现以下代码应该可以为 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*/
}

【讨论】：

这应该有更多的选票。它实际上是关于如何设置
的样式，绕过 IE 白痴。对我来说，当有高度时处理奇怪的边边框的颜色声明是秘密。

【解决方案2】：

尝试以下类似的方法（并将<hr> 替换为<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%;
}

（别忘了添加 id 或 class 以防止所有 div 看起来很奇怪）

注意：这适用于 IE7、IE8 和兼容的浏览器。可能需要对 10 年前的 IE6 进行更多调整，甚至需要图像破解（通常如此）。

【讨论】：

这在 ie7 中有效，但在 ie6 中，当我放置 margin-bottom:20px;我想要所有
的，它添加了填充，但也在两个边界之间放置了空间。我尝试设置 line-height:0 但这不起作用。我设置字体大小：0；并实现了使边界之间的差距更小，但仍然没有雪茄。您可以在此处查看结果； www.qwibbledesigns.co.uk/preview/aurelius/index.html 有什么想法吗？
让事情在 IE6 中运行需要不同的球赛（以及大量的挫折和时间，这就是为什么这么多公司不理会 IE6）。考虑以编程方式修复它（即使用 JS onload）。另外：确保有一些内容，例如div 中的&nbsp;。如果没有任何效果，请使用 10 年前 IE6 诞生时使用的技巧：制作图像，拉伸它。这是一种始终有效的方法。
美丽，' '成功了，非常感谢你。我是在 IE6 之后很久才开始编码的，所以对这些技巧的了解并不多=)
不幸的是，这种方法失去了 HR 的所有语义含义。想要在 CMS 文本编辑器中为最终用户设计 HR 样式的用户会很难过。

【解决方案3】：

如果您的客户已经在网站上贴上了

标签，您可以只设置 hr 以及 hr 类的样式，然后将

标签换成 ie6 和 ie7。

使用 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%;
}

然后在你的js文件中放：

if ($.browser.msie && $.browser.version.substr(0, 1) <= 7) {
    $("hr").replaceWith('<div class="hr"></div>');
}

显然，此修复需要 jQuery，但它对我来说效果很好。

【讨论】：

这有很多问题，尤其是如果您的 Web 应用程序中有任何类型的 Javascript DOM 生成。 Matt 的纯 CSS 解决方案是必经之路。

【解决方案4】：

我认为最简单的方法是改用<div class="hr"></div>。根据我的经验，样式化 <hr/> 跨浏览器是令人头疼的。

【讨论】：

【解决方案5】：

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; 
}

【讨论】：

【解决方案6】：

将高度设置为 2px 为我解决了这个问题。

hr {
    margin: 1em 0 1em 0;
    border: none;
    border-top: 1px solid #000;
    height: 2px;
    display: block;
}

【讨论】：