作者：武利剑

标准参考

关于 CSS 中的特性 (property) 值 'inherit'

在现行 CSS 2.1 规范被描述中，每一个特性 (property) 可以有一个指定值为 'inherit' ，即，对于给定的元素，该属性和它父元素相对属性的计算值取一样的值。

继承值通常只用作后备值，它可以通过显式地设置 'inherit' 而得到加强。

关于 'inherit' 的详细信息，请参考 CSS2.1 规范 6.2.1 The 'inherit' value 中的内容。

问题描述

特性值 'inherit' 在 CSS 1 历史规范中并没有被定义，这导致使用历史版本 CSS 规范做参照的老旧浏览器 IE6 IE7 IE8(Q) 中不被支持这个特性值。

其他浏览器对默认样式的显式性 'inherit' 存在不同程度的支持缺陷。

造成的影响

显式性的使用了特性值 'inherit' 继承原本没有默认可继承性的属性 ，在 IE6 IE7 IE8(Q) 中将无效。IE8(S) 中块级元素无法使用 'inherit' 特性值从行内元素继承默认 'display' 值，这均可能造成严重布局问题。
另外，Opera 内使用 'inherit' 值显式性继承 BUTTON 元素默认 'border' 特性值将无效。

受影响的浏览器

IE6 IE7 IE8 Opera

问题分析

我们构建类似如下测试代码，全面检测 'inherit' 设置值的支持程度，由于代码较长，不在文中整体给出，详细内容见本文结尾处的 测试页面。

<div style="border:10px solid red"> <span
                style="border:inherit;">border:inherit</span> Hello! </div> <span> <div
                style="display:inherit;">div</div> + span <span> <em> <div
                style="display:inherit;">div</div> + strong <em> ...

根据测试页面显示结果，总结出所有浏览器对于 'inherit' 的支持情况，如下表：

	IE6	IE7	IE8(Q)	IE8(S)	Firefox	Safari	Chrome	Opera
inherit	N	N	N	Y1	Y	Y	Y	Y

【注1】：蓝色文字表示各浏览器对 'inherit' 特性值支持缺陷。

对照表格可见， IE6 IE7 IE8(Q) ²不支持对样式显示性设置 'inherit' 特性值， IE8(S) Firefox Safari Chrome Opera 整体支持对样式显示性设定 'inherit' 特性值。

但是其中 IE8(S) 存在较大支持缺陷，Opera 存在较小支持缺馅，他们如下：

• IE8(S) 中，块级元素法通过设置 'display:inherit' 特性值，显式性继承绝大部分行内元素的默认 'display' 特性值，但却可以显示性继承 BUTTON 元素的默认 'display' 特性。
• Opera 中，P 元素无法通过设置 'border:inherit' 特性值，显式性继承 BUTTON 元素的默认 'border' 特性。

【注2】：由于仅低版本 IE 浏览器开发时间跨越了 CSS 1.0 规范标准至 CSS 2.1 规范标准制定时段，因此他们对 CSS 2.0 规范中出现的 'inherit' 特性值无法做到预知性支持 。
更多 IE CSS 兼容性问题信息，可以参看 MSDN 中 CSS Compatibility and Internet Explorer 文章描述。

解决方案

使用标准模式渲染页面，并尽量避免使用 'inherit' 值显式性继承样式设定、行内元素的默认 'display' 特性值和 BUTTON 元素默认 'border' 特性值，以兼容个浏览器。

• 使用标准模式渲染页面；
• 在 IE6 IE7 退出舞台之前避免使用 'inherit' 值显式性的继承样式设定；
• 在 IE8 内不使用 'inherit' 值显式性继承行内元素的默认 'display' 特性值；
• 在 Opera 内，不对使用 'inherit' 值显式性继承 BUTTON 元素默认 'border' 特性值。

参见

知识库

• ...

相关问题

• RM8001: 各浏览器对 'display' 特性值的支持程度不同