【问题标题】: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 中的 。如果没有任何效果,请使用 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】:

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

【讨论】:

    【解决方案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;
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2017-10-31
        • 2010-10-09
        • 1970-01-01
        • 2011-12-20
        • 1970-01-01
        • 2012-03-23
        • 2013-03-23
        • 2013-11-12
        相关资源
        最近更新 更多