作者：丁宗秋

标准参考

根据 CSS 2.1 规范对 'padding' 特性的描述，'padding' 特性可以应用于 'display' 特性设定为 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-colum 以外的所有元素。

关于 'padding' 特性的更多资料，请参考 CSS2.1 规范 8.4 Padding properties 中的内容。

问题描述

IE 混杂模式(Q) 中给 IMG 元素设置 'padding' 特性无效。

造成的影响

此问题将导致 IMG 元素的盒模型渲染在 IE 混杂模式中与其他浏览器有区别，从而造成布局差异。

受影响的浏览器

IE6(Q) IE7(Q) IE8(Q)

问题分析

根据 W3C 规范可以肯定 'padding' 特性能够作用于 IMG 元素，分析以下代码：

<img style="padding:20px; background:gold"
                src="http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" />

代码中为 IMG 标记设置了上、右、下、左 4 个方向的 'padding'，如果其生效，金色的背景会被显示出来。实际在各浏览器下的截图：

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

事实可见，在 IE6(Q) IE7(Q) IE8(Q) 中没有遵循规范定义，'padding' 特性设置在 IMG 元素中不起作用。

解决方案

使用标准模式。
在 IE6(Q) IE7(Q) IE8(Q) 中如需为 IMG 元素设置 'padding' 特性，需要在 IMG 元素外加一层容器标签，为该标签设置 'padding'。

参见

知识库

• ...

相关问题

• ...