今天手動添加了一段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>
</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> </td>
</tr>
</table>
</body>
</Html>
在IE中浏覽:
在Firefox中浏覽:
兩端代碼幾乎一樣的代碼確在不同浏覽器中出現了迥然不同的效果,而這種區別又是如此的總要,因為我們常常這樣來拼接切割後的圖片。
其實,仔細觀察就會發現,兩端Html唯一不同的就是第一段中<img/>是換了行之後才跟</td>,而第二段代碼<img>是緊跟</td>的,正是如此,IE認為第一段代碼<img>和</td>產生了空格(雖然有無限個空格,但只解析為一個),導致出現了占位符,而Firefox忽略不計。
本來是認為代碼1,風格比較好,樹樁對齊,沒想到浪費了我一個多小時的調試。^^||