IE那些烂事--不能正常显示的img

     曾经有一张图片在Firefox下显示正常，但是在IE下却显示灰常，我问IE为什么做的如此垃圾，旁边的哥们儿答曰： 因为IE想给其它浏览器厂商提供发展的机会。这样的回答实在是太精辟了！

    在IE下不能正常显示的问题有种种，其主要原因是我们在开发过程中都是以Firefox作为测试工具进行开发的。我们采用Firefox作为测试工具是因为Firefox有着强大的调试功能，是开发人员必不可少的利器之一。而且Firefox对W3C的标准支持比较好，只要Firefox下显示正常，其它浏览器（ＩＥ除外）基本显示正常。

    现在继续来说，那个图片不能正常显示的问题。首先看一下我的原始代码：

HTML Code:

<img height="20" width="20" class=" startOnClass" title="${resboundle.firstScore}“ />

CSS 样式表：

 .ecmEvaluationStar .startOnClass{ background-image: url("images/star-on.gif"); background-repeat: no-repeat; text-align: center; width: 20px; height: 20px; display: inline-block;}

    在这里，Firefox下面能够正常显示金色五角星，而IE下却不能正常显示，这是为什么呢？我们来看一下W3C标准下定义的img标签：

img 元素向网页中嵌入一幅图像。

请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img> 标签有两个必需的属性：src 属性 和alt 属性。

    此处，我们显示的金色五角星是通过设置背景来显示图片，而非通过img标签来嵌入图像。在IE下，解析器解析img标签时，一定会查找src属性，如果找不到该属性，就会解析异常。而Firefox在解析img标签时，如果找不到src属性，就会将其解析为Div元素。

    上述中同样的代码，图片显示不同，正是由于img标签缺少了src属性，不同的浏览器解析方式不同所造成的。如果将上述代码更改为如下代码就不此问题。

    <span height="20" width="20" class="startOffClass" title=" ${resboundle.firstScore} " ></span>

    作者编语：Firefox对标签的解析进行了“人性化”的设计，降低了程序出错的可能性，但也容易让初学者追求功能的展示，而忽略了编码的规范。