IE6 IE7 IE8(Q) 不支持 'outline' 特性

标准参考

关于 'outline' 特性

'outline' 可用于创建可视化对象的轮廓，例如按钮的轮廓；也可以激活表单的域等等。

它与 'border' 属性的不同之处在于：

• 它不占据文档空间；
• 它可能不是矩形的。

它是 'outline-style' , 'outline-width', 和 'outline-color' 的缩写。

关于 'outline' 的详细信息，请参考 CSS2.1 规范 18.4 Dynamic outlines: the 'outline' property 中的内容。

问题描述

CSS 2.1 规范中描述的 'outline' 特性，在 CSS 1 历史规范中没有规定，这导致早期版本的浏览器，如：IE6 IE7 IE8(Q) 中 'outline' 特性并不被支持，直到 IE8(S) 才修复了这个问题。

造成的影响

可能会使轮廓或高亮边缘等显示不出来，不会影响布局。

受影响的浏览器

IE6 IE7 IE8(Q)	不支持 'outline' 'outline-style' 'outline-width' 'outline-color'

问题分析

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

分析以下代码：

<div style="outline:1px solid red;">
  Hello!
</div>

• DIV 的 'outline' 被设置为1像素的红色轮廓

根据 CSS2.1 规范中的描述可知，文本 'Hello!' 应该有红色的轮廓。

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

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

所以对于 'outline' 以及 'outline-width' 'outline-color' 'outline-style' 的支持情况，如下表：

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

解决方案

由于 'outline' 特性不影响盒模型及文本流，所以使用此特性时，在不支持的 IE6 IE7 IE8(Q) 中不会出现影响布局的兼容性问题，只会在较小的程度上影响视觉效果，暂时没有好的替代方案。