替代水平分割线<hr>标签的方法

Question

我正在使用以下代码生成水平条形图。在旧版本的浏览器中它可以运行，但在Internet Explorer 9中却不行。除非我点击“兼容性视图”，否则它不会可见。我们有替代方案吗？或者已经被取代了吗？

<hr style="color:#F87431 ; height:7px "/>

- Chandra Eskay

Answer 1

尝试一下

<hr style="background:#F87431; border:0; height:7px" />

- Oliver

Answer 2

HR的原始形式，像STRIKE、B等，太注重布局和展示。

HTML5正在将标记向更语义化的结构移动，更强调布局放置在CSS和媒体元素上。

来自W3C文档：

In HTML 4.01, the <hr> tag represented a horizontal rule. 
In HTML5, the <hr> tag defines a thematic break. 
However, the <hr> tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.

所以你只需要将它漂亮地样式化。

- Jeff Watkins

Answer 3

我也使用 div 实现此效果，类似于 <div style="width: 100%; height: 7px; background: #F87431; overflow: hidden;">

- Andrei Hardau

---

谢谢伙计，你救了我的一天。我一直在寻找 <hr> 的替代方案，非常感谢。 - Lalit Rao

Answer 4

尝试像这样做：

<div style="color:#F87431;height:7px;">-------------------</div>

在这个阶段不要使用HR，因为它已经过时了，只在测试中使用内联CSS ;-)

- IrishChieftain

---

HTML5的变化：虽然之前的HTML版本仅以表现形式定义了hr元素，但该元素现在已被赋予了特定的语义目的，即代表“段落级别的主题分隔符”。请参见http://dev.w3.org/html5/markup/hr.html。 - Oliver

仍然不应该使用它，因为它看起来很糟糕，未来维护您的标记的开发人员会认为如果您使用了它，可以重用它 - 而且他们可能不会样式化其固有的丑陋。在实践中，应该避免使用它。 - IrishChieftain

不要废弃，这个想法很糟糕。 - dfmiller