
好些美工同学应该都遇到过这个问题,就是通过PS切图后导出的代码用DW编辑,将图片上传到淘宝后台,然后在DW中将更换图片链接和添加需要的超链接或者热点等操作后,页面显示是正常的。
但是把代码贴到淘宝装修页面中去,发布之后页面却出现散屏情况,即图片错位,有空隙。
这种情况,十有八九是使用了PS导出了table布局的代码,然后会在部分浏览器中显示没问题,有些浏览器显示却不正常。
下面就以图文形式来交大家如何解决这个问题:
首先可以使用火狐或谷歌浏览器查看下图片错位部分的代码,一般
其实这里是缺了一个分隔符,虽然高度只有1px,但是确实支撑整个表格的最底层元素。一般在其他浏览器都是没问题的,到了火狐浏览器,就会出现散屏现象。
只要找到这个分隔符,上传到淘宝后台,将页面代码中缺少的分隔符补充上去就能解决问题了。
打开PS导出的图片文件夹,找到分隔符(一般的命名都是分隔符,大小都是宽1px,高1px),并上传到淘宝后台
将分隔符图片上传到淘宝后台,获取图片链接
将发布后显示不正常的代码复制到DW中的Html页面中,找到表格最后一行缺少图片路径的地方:
光标选择src=””,然后按下Ctrl+F键,打开查找和替换窗口,将src=””替换为src="分隔符上传淘宝后的路径",然后点击”替换全部”按钮即可。
全部替换后,会将所有src=””替换掉,会弹出替换的个数,检查下最后一样缺少分隔符的标签数,不要把其他区域的src=””给替换了。
为了避免这种情况,尽量的只将显示异常的
