PS切图导出代码后出现的图片布局散乱的解决方法——table布局
2013-12-24 14:46
651 查看
前言:
一般来说,大部分美工PS切图后导出的都是使用PS默认的table布局的页面,出现最多的异常是上传代码,替换图片后,发现图片布局散乱,完全不是想要的效果。轻微的是浏览器不兼容,只有部分浏览器可以,严重的所有浏览器中都会散乱的。
避免此类问题出现的解决方法:
PS切片导出代码使用table布局,就要注意是否有"分隔符.jpg",如果有,上传代码的时候要把分隔符一块儿上传替换,如果这个没有上传,有些浏览器可能对显示没有影响,但并不是所有浏览器都能正常显示的。如上图,就是在火狐浏览器下显示不正常的。
为什么会出现这个问题:
PS切片导出代码,默认设置为table布局。table布局类似于网格结构,结构比较严谨,如果切片不规则,就要使用合并行或列来表现图片的不规则显示,如下图:
最下行会生成一行全部由"分隔符.jpg"组成(有时候最右侧单元格也会有),整个表格不规则切片布局都是由这一行分隔符.jpg为最小单元格来支撑的。作为整个表格最小的支撑单位,这行由分隔符组成的表格行一定要正确,如果分隔符没有上传,有些浏览器会忽略这行,那由这些最小表格单位支撑的不规则图片排列也就没有了标准,随之出现了散屏。
案例解析:
异常1:
问题描述:PS切片导出代码上传网站后台后,IE、谷歌浏览器下显示正常,火狐浏览器下散屏:
问题解析:经查,ps不规则切片过程中,会产生"分隔符.jpg",在生成table时,对不规则的图片进行调节,哪怕是两个切片的两个边缘横向或纵向仅仅相差1px,都会多一个1px的单元格来支撑。不同浏览器对表格的解析会有一些不同,IE,谷歌浏览器是承认没有src值的img标签占据的控件,也就可以支撑当前单元格,但火狐浏览器是不承认的,如果没有src值,这个img标签,甚至当前单元格是不占空间的,也就无法起到不规则图片排列的支持作用。
解决方法:经查,系切图中产生1x1大小分隔符,布局在table中最后一个tr中有img标签没有src属性及属性值,添加分隔符后显示正常。
一般来说,大部分美工PS切图后导出的都是使用PS默认的table布局的页面,出现最多的异常是上传代码,替换图片后,发现图片布局散乱,完全不是想要的效果。轻微的是浏览器不兼容,只有部分浏览器可以,严重的所有浏览器中都会散乱的。
避免此类问题出现的解决方法:
PS切片导出代码使用table布局,就要注意是否有"分隔符.jpg",如果有,上传代码的时候要把分隔符一块儿上传替换,如果这个没有上传,有些浏览器可能对显示没有影响,但并不是所有浏览器都能正常显示的。如上图,就是在火狐浏览器下显示不正常的。
为什么会出现这个问题:
PS切片导出代码,默认设置为table布局。table布局类似于网格结构,结构比较严谨,如果切片不规则,就要使用合并行或列来表现图片的不规则显示,如下图:
最下行会生成一行全部由"分隔符.jpg"组成(有时候最右侧单元格也会有),整个表格不规则切片布局都是由这一行分隔符.jpg为最小单元格来支撑的。作为整个表格最小的支撑单位,这行由分隔符组成的表格行一定要正确,如果分隔符没有上传,有些浏览器会忽略这行,那由这些最小表格单位支撑的不规则图片排列也就没有了标准,随之出现了散屏。
案例解析:
异常1:
问题描述:PS切片导出代码上传网站后台后,IE、谷歌浏览器下显示正常,火狐浏览器下散屏:
问题解析:经查,ps不规则切片过程中,会产生"分隔符.jpg",在生成table时,对不规则的图片进行调节,哪怕是两个切片的两个边缘横向或纵向仅仅相差1px,都会多一个1px的单元格来支撑。不同浏览器对表格的解析会有一些不同,IE,谷歌浏览器是承认没有src值的img标签占据的控件,也就可以支撑当前单元格,但火狐浏览器是不承认的,如果没有src值,这个img标签,甚至当前单元格是不占空间的,也就无法起到不规则图片排列的支持作用。
解决方法:经查,系切图中产生1x1大小分隔符,布局在table中最后一个tr中有img标签没有src属性及属性值,添加分隔符后显示正常。
相关文章推荐
- css布局图片与下面文档出现多出像素空白解决方法
- PHP导出table为xls出现乱码解决方法
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- 解决Andriod软键盘出现把原来的布局给顶上去的方法(转)
- 关于android ndk出现ReferenceTable overflow (max=1024)的解决方法
- servlet层调用biz业务层出现浏览器 500错误,解决方法 dao数据访问层 数据库Util工具类都可能出错 通过新建一个测试类复制代码逐步测试查找出最终出错原因
- 解决加载图片出现OOM的方法
- 图片下面出现空白像素BUG的常用解决方法归纳
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- 使用七牛上传图片代码,导入文件常遇问题解决方法
- Windows 2008等操作系统升级时出现800F0818错误代码的解决方法
- ORA-01810:格式代码出现两次 解决方法
- 安装和卸载程序时总是出现2502,2503错误代码的解决方法
- 解决Andriod软键盘出现把原来的布局给顶上去的方法
- [置顶] HTML5 图片<img/>下边界出现空隙,去除空隙的解决方法
- 解决eclipse在代码提示时每个方法出现两个的问题(图)
- 水晶报表工具栏出现红叉叉无法打印导出等问题的解决方法
- [置顶] Android Studio出现:Your project path contains non-ASCII 错误代码解决方法
- 关于生成缩略图及水印图片时出现GDI+中发生一般性错误解决方法
- MySQL出现Waiting for table metadata lock的原因以及解决方法