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