【分享】小心 IE 中对 IMG 元素 alt 属性的误用
看一个人有没有做过跨浏览器开发,有时候问几个简单的问题就知道了。其中,比较经典的一道题目就是:鼠标悬停在图片上时,如何显示图片的提示信息?
呃,,,一般都会回答使用 title,用IE用惯了的还会再加一个 alt,或直接回答 alt。不信你试试,屡试都爽的问题。
标准中的 alt 属性其实,alt 属性在标准里(http://www.w3.org/TR/REC-html40/struct/objects.html#adef-alt W3C HTML 4.01 规范第13.8节),指定了在用户端,对我们来说也就是浏览器,不能显示图片、表单和 applets 的时候显示的替换文字,在图片加载之前,也会显示 alt。也可以算得上是提示信息。
IE 中 alt 属性的双重身份在 MSDN 中关于 alt 属性的备注里描述了 alt 属性的内容用来在仅支持文本的浏览器中替换图片,同时也用来作图片被载入之前的临时显示内容。并且,alt 属性也扮演了在没有 title 属性的情况下当用户将鼠标移动到图片上时显示提示框(tooltip)的角色。这是与标准不相符的部分。在IE8中才被修复。
在IE中,alt 可以兼 title 的职。
At here:http://msdn.microsoft.com/en-us/library/ms533073%28VS.85%29.aspx
例子 HTML code
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" alt="google的标志"/>
<br/>
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" title=”正宗的提示” alt="google的标志"/>
<br/>
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" alt="非正宗提示"/>
上面的例子,在IE6/IE7/IE8(Q)中打开后,鼠标悬停在最后一个图片上,也会有提示:“非正宗提示”。而在 IE8(S) 和Firefox/Safari/Chrome中,鼠标悬停在最后一个图片上,什么都不会显示。
小心需要提示信息时,请使用 title,不要单独使用 alt。
求雨天气好闷热,希望今天晚上能下雨。大家一起跟我求雨吧……
更多兼容性问题:【分享】浏览器兼容性问题目录
------解决方案--------------------貌似没人气 ,沙发
------解决方案--------------------不要求雨拉,长江水泛滥了