zoukankan      html  css  js  c++  java
  • PS切图导出代码后出现的图片布局散乱的解决方法——table布局

    前言:

    一般来说,大部分美工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属性及属性值,添加分隔符后显示正常。

  • 相关阅读:
    java实现操作系统磁盘寻道先来先服务算法
    专业素养:发布文件,别忘了给出校验信息
    vue系列教程-08vue的动画和过渡效果
    vue系列教程-07vue动态绑定样式
    vue系列教程-06vue的事件处理
    vue系列教程-05vue常用指令
    vue系列教程-04vue数据处理和页面渲染
    vue系列教程-03vuejs的结构和生命周期
    vue系列教程-01第一个vue程序
    vue系列教程-02什么是mvvm和spa
  • 原文地址:https://www.cnblogs.com/xyyt/p/3489030.html
Copyright © 2011-2022 走看看