一，问题概述
这里所说的调试，不是说页面出现了脚本错误，是说页面显示效果和想象的不一样，想知道为什么效果会出现差异。虽然现在的“所见即所得”网页设计软件很多，但是有时在软件中预览的效果和我们真实显示的效果就是不一样，你觉得很奇怪，明明应该那么显示，可怎么显示成别的样子了，例如明明预览很好的效果，到了真实环境中页面竟然出现了错位。
二，解决方式
实际效果和预览效果不一样，这可能是多方面原因造成的，但多是页面造成的，当然也有一部分是因为浏览器之间的差异造成的，如果是纯页面造成的问题，那么推荐给你一个非常有效的调试方式，这也是我这五六年来一直使用的调试方式，经历了那么多产品和项目的摔打，遇见过许多奇怪的页面问题，但大都凭着这一点，基本解决了这些问题。
查找页面整体布局或细节中上问题，我最需要的就是定位出错的区域，当然这里说的出错，是指这一块的效果不是想象中的效果，那么如何定位这一块呢？
一种方式就是使用网页设计软件，打开该页面，则基本可以定位到出错的区域，但是还是要告诉你，现在的网页设计软件例如Dreamweaver和Frontpage，并不像你想象的那么厉害，尤其是面对复杂的页面布局时，往往显得太苍白，因此在根本上我们自己要学会一种手工调试技术，现在告诉你利用css将是一个不错的选择。
在css中标识出一个块的方式有很多种，例如可以给某个块加入背景色background-color，来判断是否我们正在修改的代码目前正在影响页面中的哪些部分，但是这种方式不是很爽，因为如果整个块内如果还有块，而且这个如果正好填充了外面的那个块，那么即使外面的块设置了背景，里面的块的背景也会覆盖掉外面的，因此有时不能反映实际情况。
这些年发现的一个非常有效的定位块的方式就是，在块中使用css边框属性，例如：style-width:1;border-color:red;border-style:solid，这个的作用就是给块加入一个外边框，一开始可以框的比较大，然后逐渐缩小范围，就很容易定位问题了。
看下面一个实际的页面，定位一下：为什么文字会在图片下方那么远？ 
HTML代码如下：
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="http://www.ajaxstu.com/Files/File/2007-11/24/89H8C8BD3CKD35HGKA.gif""/>你好啊！
</td>
</tr>
</table>
你可能会认为，img后面加文字，需要设计img的align属性，于是你对img部分做了如下设置：
<img src="http://www.ajaxstu.com/Files/File/2007-11/24/89H8C8BD3CKD35HGKA.gif"" align="absbottom"/> 
设置了之后，文字的确上移了，但是和我们想象的不一样，因为设置了该属性之后，文字应该移至与图像底部持平。
这时你可能又会想到，是不是因为td没有设置nowrap，而使得内部元素错位？顺便说一下，nowrap是一个很关键的属性，页面错位在很多情况下都是因为这个原因造成。那好设置一下，结果发现还是那个样子。
这时你可能还有点子，也有可能你会觉得没有办法。现在你就用我说的方式试一试，给各个块元素加上边框，看看会得到什么？修改后的代码如下：
<table cellspacing="0" cellpadding="0" style="border-width:1;border-color:red;border-style:solid">
<tr>
<td style="border-width:1;border-color:red;border-style:solid">
<img src="http://www.ajaxstu.com/Files/File/2007-11/24/89H8C8BD3CKD35HGKA.gif"" style="border-width:1;border-color:red;border-style:solid"/>你好啊！
</td>
</tr>
</table>
你再看看效果图： 
怎么样，知道问题在哪里了吧！原来是图片本身不合格，底部的白边太长了，其实字原本就和图片底部持平了，只是由于图片底部白色部分过长，所以显得文字太靠下，正规的解决策略就是重修修改图片，那么一切就正常了。
三，一点感悟
上面说的，是非常简单的情况，但就是这么简单的情况，分析起来没有经验都是很难过去的，想想我们在产品研发过程中，在项目开发过程中，所遇到那些离奇古怪的页面问题吧，自己经历了这么多年在页面技术上的探索与关注以及不断的实践研究，在许多方面都有自己的一些心得和体会，我一直在写这方面的文章，希望能对大家有所帮助，我想没有比那能让我更为兴奋的了... 出自:http://blog.csdn.net/eye_of_back/archive/2006/07/15/923320.aspx
