好些美工同学应该都遇到过这个问题，就是通过PS切图后导出的代码用DW编辑，将图片上传到淘宝后台，然后在DW中将更换图片链接和添加需要的超链接或者热点等操作后，页面显示是正常的。
但是把代码贴到淘宝装修页面中去，发布之后页面却出现散屏情况，即图片错位，有空隙。
这种情况，十有八九是使用了PS导出了table布局的代码，然后会在部分浏览器中显示没问题，有些浏览器显示却不正常。
下面就以图文形式来交大家如何解决这个问题:
方法/步骤
1、首先可以使用火狐或谷歌浏览器查看下图片错位部分的代码，一般<table></table>标签最后一个<tr>标签中的<img>标签应该都是没有图片路径的。
其实这里是缺了一个分隔符，虽然高度只有1px，但是确实支撑整个表格的最底层元素。一般在其他浏览器都是没问题的，到了火狐浏览器，就会出现散屏现象。
只要找到这个分隔符，上传到淘宝后台，将页面代码中缺少的分隔符补充上去就能解决问题了。
2、打开PS导出的图片文件夹，找到分隔符(一般的命名都是分隔符,大小都是宽1px,高1px)，并上传到淘宝后台。
3、将分隔符图片上传到淘宝后台，获取图片链接。
4、将发布后显示不正常的代码复制到DW中的Html页面中，找到表格最后一行缺少图片路径的地方。
5、光标选择class='lazyload' src='/images/noimg.jpg' data-original=””,然后按下Ctrl+F键，打开查找和替换窗口，将class='lazyload' src='/images/noimg.jpg' data-original=””替换为class='lazyload' src='/images/noimg.jpg' data-original="分隔符上传淘宝后的路径"，然后点击”替换全部”按钮即可。
全部替换后，会将所有class='lazyload' src='/images/noimg.jpg' data-original=””替换掉，会弹出替换的个数，检查下最后一样缺少分隔符的<img>标签数，不要把其他区域的class='lazyload' src='/images/noimg.jpg' data-original=””给替换了。
为了避免这种情况，尽量的只将显示异常的<table>标签内的代码粘贴到DW中进行编辑。
6、检查无误后，将代码重新上传页面，发布更新之后，再用各主流浏览器查看，问题解决！
7、后记：又一美工同学出现这个问题，原因就是整个页面一块儿切图，且切图的时候不细心，水平方向左右两张图都会差1~2个像素，导致最右边侧边出现分隔符。按上边的方法仍旧不能解决，可以给table标签添加这两个样式，就可以解决：
line-height: 0;
font-size: 0;
注意事项
PhotoShop切图后，导出代码默认都是table布局，但是table布局兼容性并不是很好，而且扩展性差，不易修改，最好不要用这种方法。
PhotoShop切图时，最好是将每一版块内容分开切割，这样，PS默认导出的table标签中的内容就没那么多，容易维护，即使出了问题，需要修改，那么也不会影响整体页面，毕竟table布局不易修改的。
本文整理于互联网，如有侵权，请联系email：kf@53shop.com 进行删除处理。
