打印

RU3002: 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) 中不会出现影响布局的兼容性问题,只会在较小的程度上影响视觉效果,暂时没有好的替代方案。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6
Chrome 5.0.356.2 dev
Safari 4.0.4
Opera 10.60
测试页面: outline.html
本文更新时间: 2010-06-28

关键字

outline outline-width outline-color outline-style 轮廓