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

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

在IE中浏览:
两端“弱智”的HTML代码

在FireFox中浏览:
两端“弱智”的HTML代码

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

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

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

相关文章:

  • 2021-12-08
  • 2021-10-15
  • 2022-02-08
  • 2022-12-23
  • 2021-11-27
  • 2021-07-10
  • 2022-01-26
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-27
  • 2021-12-16
相关资源
相似解决方案