作者：杨稍辉

标准参考

无

问题描述

"src" 属值为空的 IMG 元素，其渲染的尺寸在各浏览器中将有很大差异。

造成的影响

该问题将造成局部的布局混乱。

受影响的浏览器

所有浏览器

问题分析

一、IMG 元素与其 “src” 属性

IMG 元素一般用来嵌入图片

The IMG element embeds an image in the current document at the location of the element's definition. The IMG element has no content; it is usually replaced inline by the image designated by the src attribute, the exception being for left or right-aligned images that are "floated" out of line.

二、IMG 指定无效的 ”src“ 属性在不同浏览器下占用空间不同

W3C 相关规范中无明确说明 IMG 不指定有效 ”src“ 的占位情况，这需要实际来测试一下：

var imgElment = document.getElementsByTagName('img')[0]; try{
                document.write('offsetHeight:',imgElment.offsetHeight,'px;'); }catch(e){ document.write('offsetHeight:
                0px;'); } try{ document.write(' offsetWidth:',imgElment.offsetWidth,"px"); }catch(e){ document.write('
                offsetWidth: 0px'); }

各浏览器对于 IMG 元素宽与高的值分别为：

	IE	Firefox(Q)	Firefox(S)	Opera	Safari Chrome
offsetHeight	30px	24px	19px	16px	0px
offsetWidth	28px	24px	0px	34px	0px

由上表可见，各浏览器对于 IMG 指定了无效的 "src" 时，采用不同的显示失败提示图，他们的渲染尺寸个不相同。

解决方案

为了防止这种无 "src" 的 IMG 元素对页面产生布局影响，需要设置这种 IMG 的 ‘display’ 特性为 'none'。

参见

知识库

• ...

相关问题

• ...