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