作者：陆远

标准参考

如果 HR 元素设置了 'noshade' 属性，那么浏览器将渲染出一个实心的横线，而不是默认的带有沟槽效果的边框。

有关 HR 标记属性的更多信息，请参考 HTML 4.01 规范 15.3 Rules: the HR element 中的内容。

问题描述

WebKit 中 HR 元素 noshade 属性会影响 color 属性为该元素设置的颜色。

造成的影响

Safari Chrome 中 HR 标记显示效果不同。

受影响的浏览器

Chrome Safari

问题分析

分析以下代码：

<hr align="center" width="960" color="#f29e0a"
                noshade>

根据属性 color="#f29e0a"，浏览器应该以 "#f29e0a" 的纯色来显示HR元素，但是在 Chrome 和 Safari 中，浏览器对于 HR 元素的属性会进行以下转换：

• color 属性（如color="blue"）：转换为 CSS 的 'border-color:blue; border-style:solid solid solid solid; background-color:blue;'
• noshade 属性：转换为 CSS 的 'border-color:gray; border-style:solid solid solid solid; background-color:gray;'¹
• size 属性（如 size = "20"）：转换为 height:18px;²

在 Chrome Safari 中，WebKit 内核先转换出了 "#f29e0a" 为 HR 元素的背景及边框色，但由于 "noshade" 属性在后，颜色值为 "#808080" 的 gray 又替代了 "#f29e0a" 作为 HR 元素的背景及边框色。所以导致 HR 元素颜色变成了灰色 "#808080"。

事实上 HTML 4.01 规范中已经不建议使用 noshade 属性，应改用 CSS 相关属性来设置显示效果。

注：
1. gray 的颜色值为 #808080。
2. 为 size 的数值减去上下边框，20 - 1 - 1 = 18。

解决方案

去除 HR 元素的 noshade 属性或者将 noshade 属性放置在 color 属性之前。

参见

知识库

• ...

相关问题

• ...