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