作者：陆远

标准参考

根据 W3C HTML 4.01 规范中的描述，OBJECT 元素的渲染规则，主要有以下两点：

1. 用户端首先必须尝试渲染 OBJECT，而不应该渲染其内容，但在其内部包含 PARAM 一级子元素时必须对它们进行检查。
2. 若用户端出于某种原因无法渲染 OBJECT，则必须尝试渲染其内容。

可以注意到，规范中并没有说明当 OBJECT 内容为空的时候应该如何渲染。

关于 OBJECT 元素及其渲染规则 的详细信息，请参考 HTML4.01 规范 13.3.1 中的内容。

问题描述

Firefox Opera 中 OBJECT 元素的默认尺寸为不可视；而 IE 中，OBJECT 默认尺寸为 16 x 16 像素；在 Chrome 和 Safari 下的默认尺寸为 300 x 150 像素。

造成的影响

若没有为 OBJECT 元素设置明确的宽度和高度，则可能在各浏览器中由于其内在尺寸不同导致最终布局上的差异。

受影响的浏览器

所有浏览器

问题分析

分析以下代码：

<object style="background:gray; border-top:5px solid #777; border-right:5px solid #555;
                border-bottom:5px solid #333; border-left:5px solid #999;"></object>

上面代码中，没有为 OBJECT 元素设置宽度和高度，则其尺寸为其作为替换元素的内在尺寸。其背景色为灰色，上下左右均有5px的边框。

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

IE	Chrome Safari	Firefox Opera

OBJECT 元素没有设置任何引入信息，无法渲染实际对象，此时根据 W3C 规范应该尝试渲染其内容，而其内容却为空。

在 IE 中 OBJECT 有默认的内在尺寸，宽度和高度均为 16px；Chrome Safari 中这个内在尺寸为宽度和高度分别为 300px、150px；在 Firefox Opera 中，则没有内在尺寸。

解决方案

OBJECT 元素为替换元素，应为 OBJECT 元素设置一个明确的宽度和高度。

参见

知识库

• ...

相关问题

• ...