打印

HO3003: IE6 IE7 IE8(Q) 中 IMG 元素的 alt 属性在没有 title 属性的情况下会被当作提示信息使用

作者:陆远

标准参考

W3C HTML 4.01 规范规定,alt 属性指定了在 User Agents 不能显示图片、表单和 applets 的时候显示的替换文字。 关于 alt 属性的详细信息,参考HTML 4.01 规范第13.8节

问题描述

alt 属性在 IE6 IE7 IE8(Q) 下具有双重意义。在给 IMG、AREA、INPUT[type=image] 元素设置的 alt 属性值不但可以作为该元素的替代文字,在该元素没有指定 title 属性时,还可以作为提示信息(tooltip)被显示出来。

造成的影响

  • 若用户需要显示提示框,并且仅指定了 alt 属性,则在 IE8(S) 及其它浏览器中将无法显示提示框;
  • 若用户不需要显示提示框,并且指定了 alt 属性,则在 IE6 IE7 IE8(Q) 中仍然会显示提示框。

受影响的浏览器

IE6 IE7 IE8(Q)  

问题分析

IE6 IE7 IE8(Q) 对 alt 属性的理解有误,这些浏览器混淆了此属性与 title 属性。 在没有设置 title 属性的情况下,鼠标放在设置了 alt 属性的 IMG AREA INPUT[type=image] 元素上时仍会弹出提示框(tooltip)。

分析以下代码:

<img src="...." alt="替代文字"/>

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

IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera
有悬停提示 无悬停提示

在 MSDN 中关于 alt 属性的备注里描述了 alt 属性的内容用来在仅支持文本的浏览器中替换图片,同时也用来作图片被载入之前的临时显示内容。 并且,alt 属性也扮演了在没有 title 属性的情况下当用户将鼠标移动到图片上时显示提示框(tooltip)的角色。

此错误在 IE8 标准模式中被修复。

关于 MSDN 中对 alt 属性的详细描述,参考 alt Property

解决方案

  • 若用户需要显示提示框,则指定 title 属性;
  • 若用户不需要显示提示框,则指定 title=""。

参见

知识库

相关问题

测试环境

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

关键字

IMG alt title 提示 图片 tooltip alternate