IE6 IE7 IE8(Q) 不支持 CSS 特性的 ‘inherit’ 值

Posted by bower on September 03, 2010
cross browser

分享给你的朋友->bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark

标准参考

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

每一个特性 (property) 可以有一个指定值为 ‘inherit’ ,即,对于给定的元素,该属性和它父元素相对属性的计算值取一样的值。

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

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

问题描述

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

造成的影响

显式性的使用了特性值 ‘inherit’ 继承原本没有默认可继承性的属性 ,在 IE6 IE7 IE8(Q) 中将无效。

受影响的浏览器

IE6 IE7 IE8(Q)

问题分析

对于此问题,我们通过以下的测试用例来说明。

分析以下代码:

<div>
	<span style="display:inherit;">Aloha!</span>
	Hello!
</div>
  • SPAN元素使用了 ‘display:inherit;‘ 样式,同时,它的包含块的 display 属性值为 ‘block’;
  • 根据上述规范,在 SPAN 标记使用了该值后,会继承包含块的’display’特性值,最终应该成为一个块元素;

根据 CSS2.1 规范中对块级元素的描述可知,文本 ‘Aloha’ 和 ‘Hello! ‘不应该在同一行显示。

这段代码在不同的浏览器环境中的表现:

IE6 IE7 IE8(Q) IE8(S) Firefox Opera Safari Chrome

所以对于’inherit’的支持情况,如下表:

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

【注】:本文中仅以默认不可继承的 ‘display’ 特性为例,实际情况中,所有默认不可继承的特性在 IE6 IE7 IE8(Q) 中情况均与本例相同,如:’float’、’background’、’border’、’clear’、’clip’、’width’、 ‘height’、’margin’、’padding’ 等。

解决方案

使用标准模式渲染页面,在 IE6 IE7 退出舞台之前避免使用 ‘inherit’ 值显式性的继承不具有默认可继承性的样式。

分享到:人人网开心网腾讯微博新浪微博豆瓣分享腾讯空间百度搜藏腾讯书签

分享给你的朋友->bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word