打印

BW5009: WebKit 中 HR 元素 noshade 属性会影响其 'color' 特性

作者:陆远

标准参考

如果 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;'1
  • size 属性(如 size = "20"):转换为 height:18px;2

在 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 属性之前。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6
Chrome 4.0.302.3 dev
Safari 4.0.4
Opera 10.51
测试页面: hr_noshade.html
本文更新时间: 2010-07-18

关键字

WebKit HR noshade color