打印

HO1007: Firefox Opera 中 OBJECT 元素的默认尺寸为不可视

作者:陆远

标准参考

根据 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
IE Object without content Chrome and Safari Object without content Firefox and Opera Object without content

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

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

解决方案

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

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.3
Chrome 6.0.422.0 dev
Safari 4.0.5
Opera 10.53
测试页面:
本文更新时间: 2010-08-11

关键字

OBJECT size width height