網頁佈局時常常會遇到很多讓人苦惱的兼容性問題，或者莫名其妙的錯誤。這裏列出的是html文件裏，代碼換行時可能導致的問題。
一直以來，都被告知寫代碼要注意換行、找遞進，這樣能夠讓代碼顯得更整潔，可讀性更強。看看如下的一段html+php的代碼，就是我嚴格遵從“換行+遞進對稱”的規則寫的：
<div class="introductionBig">
<a href="<?php echo "recommendation.php?choice=recommendation";?>">
<img src="images/recommendation.jpg" alt="recommendation Pic"/>
</a>
</div>看起來是挺不錯的，每個標籤都收尾對稱，很工整，但是到了顯示的頁面，卻讓我的頁面顯得不那麼美好了：
如上，黑色的空處本來應當是顯示“最新優惠”這個方格，但是最新優惠被擠到了右邊，留下這塊黑色空地。我查看了一下firebug，才發現是因爲這個時候a標籤佔據了一定的行高，而由於頁面的各大方塊（店長推薦、最新優惠、會員申領、幸運抽獎以及由品牌文化+精彩相冊+互動留言+聯繫我們組成的那個大方塊）高度都是相同的，而且都是float:left設置，這個時候唯獨給“店長推薦”這個方塊添加了a標籤，a標籤佔據了行高就會讓最新優惠這個塊被擠到了右邊，firebug查看效果如下所示：
如上，使用f12調出firebug，點擊那個箭頭，再點擊a標籤，發現a標籤佔據行高18，如下所示：
tvb的演員見狀，嘆息道：“發生D甘唧事，大家都唔想。”嘗試去css文件裏面設置a標籤高度爲0px發現不管用，而且怕會影響後面其它需要用到的a標籤。然後胡亂調試了一下代碼，發現把閉合a標籤</a>放到緊跟img標籤那一行後，竟然能夠解決問題——a標籤依然佔據高度，但已經是被包含在方塊裏面，不會吐出來導致其他float:left的方塊要避開他而出現右移。代碼和頁面顯示如下：
<div class="introductionBig">
<a href="<?php echo "recommendation.php?choice=recommendation";?>">
<img src="images/recommendation.jpg" alt="recommendation Pic"/></a>
</div> 如上，閉合a標籤沒有換行去對稱前面的起始a標籤，但卻能夠因此避免上面提到的a標籤佔據額外高度的問題。
此外，html代碼換行還可能在ie上導致“空文本節點”的警告（僅在ie調試工具裏面出錯，頁面不報錯）。像我上面的兩個代碼示例都會在ie的調試工具裏出現警告如下：
在百思不得其解並且百度也不得其解的情況下，我又開始亂調代碼。最後發現把閉合div標籤也不要換行就ok了，如下所示：
<div class="introductionBig">
<a href="<?php echo "recommendation.php?choice=recommendation";?>"><img src="images/recommendation.jpg" alt="recommendation Pic"/></a></div>
經歷了上面的問題，我得出的教訓就是網頁代碼換行需謹慎。當然，維護代碼結構的分行和對稱性還是很有必要的，所以只能說在頁面佈局調試時一旦發現一些莫名其妙的類似上面的錯誤，可以調調代碼看是不是換行出了問題。另外，善於利用ff和ie的調試工具來觀察各個元素的佔位也是很重要的。如上遇到的換行問題，如果有朋友能夠給予深入的解釋，還望賜教。謝謝。