两端“弱智”的HTML代码

今天手动添加了一段html代码，没想到确出现了让人”百思不得其解“的意外，看下面一段html：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 无标题文档 </ title >
</ head >
< body >
< table  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#990099" >
     < tr >
         < td >< img  src ="images/bar1.gif"  alt =""  width ="200"  height ="38"   />
         </ td >
         < td >< img  src ="images/bar2.gif"  alt =""  width ="136"  height ="38"   />
         </ td >
         < td > &nbsp;
         </ td >
     </ tr >
</ table >
     < table   border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#FFFF00" >
       < tr >
         < td >< img  src ="images/bar1.gif"  alt =""  width ="200"  height ="38"   /></ td >
         < td >< img  src ="images/bar2.gif"  alt =""  width ="136"  height ="38"   /></ td >
         < td > &nbsp; </ td >
       </ tr >
     </ table >
</ body >
</ html >

在IE中浏览：


在FireFox中浏览：


两端代码几乎一样的代码确在不同浏览器中出现了迥然不同的效果，而这种区别又是如此的总要，因为我们常常这样来拼接切割后的图片。

其实，仔细观察就会发现，两端html唯一不同的就是第一段中<img/>是换了行之后才跟</td>，而第二段代码<img>是紧跟</td>的，正是如此，IE认为第一段代码<img>和</td>产生了空格（虽然有无限个空格，但只解析为一个），导致出现了占位符，而FireFox忽略不计。

本来是认为代码1，风格比较好，树桩对齐，没想到浪费了我一个多小时的调试。^^||