打印

HO1002: IMG 元素的 src 属性为空时其尺寸在各浏览器中不一致

作者:杨稍辉

标准参考

问题描述

"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'。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6
Chrome 4.0.302.3 dev
Safari 4.0.4
Opera 10.60
测试页面: null_img_with_and_height.html
本文更新时间: 2010-08-04

关键字

IMG src width height 尺寸