网页布局时常常会遇到很多让人苦恼的兼容性问题，或者莫名其妙的错误。这里列出的是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的调试工具来观察各个元素的占位也是很重要的。如上遇到的换行问题，如果有朋友能够给予深入的解释，还望赐教。谢谢。