完美解决png8毛边问题

  以前做pc端时PNG8图片在ie6下的解决方案是这么做的:

  将PNG保存为PNG24的,然后在项目中加上DD_belatedPNG.js这样的库,这样png24在ie6中的白色底就透明了。此方法看上去相当的完美,因为第一方便后期的图片的维护,一个js库就轻轻松松搞定了!为我们这群前段妹子省了不少心哈 O(∩_∩)O!第二,可谓是为服务器也减少了不少负担。

  但是不幸的事发生了,就在本周做微信智慧生活的活动页时可真叫纠结。DD_belatedPNG.js跟框架的js冲突了(具体什么原因没去查,因为时间实在太紧迫了,估计是框架不太完美),首先介绍下此次活动页面的框架,全屏滑动(支持鼠标滚动切换),页面内容到也简单,毕竟只是个活动页嘛(*^__^*) …… 有兴趣的小伙伴欢迎点击(http://action.weixin.qq.com/payact/readtemplate?t=pc/2015/wisdom_life/index_tmpl)

  好了,回到正题,在此项目中添加DD_belatedPNG.js后,png24在ie6中不仅没有呈现透明效果,还影响了部分绝对定位,这就太伤心了(;′⌒`) ,为了能够在预估的时间内上线,所以当时就没太纠结了,因为也没啥好纠结的,引用大婶的库,难免存在冲突。最后在导师的指点下,还是决定ie6的用png8的图片,其余浏览器用png24位的。

  问题又来了…… 之前png8多半是会有毛边的,所以个人很是不喜欢。但是在导师的指点下还真没有了呢,效果基本跟其他浏览器一致。这种方法也是非常简单的,就是在保存的web格式的时候选择png8,将杂边填充个接近背景色(或是背景色)的即可,然后到样式中对其做出相应的补丁即可,这个方法真的是太完美了,几乎找不到瑕疵!上张在ie6中的效果吧O(∩_∩)O哈哈~

  ie6中效果

  Chrome效果

  说到这里,顺便说说这次遇到的另一问题吧,以前没太注意。一般情况,拿到一个项目时我们会先跟产品、设计那边沟通,完了才会是我们的工作,什么分析设计稿啊,搭建框架啊……等等,搭建框架的时候会对页面所要用到的标签进行初始化,那么对于这种标题类的,h1、h2、h3、h4、h5、h6,虽然已经对其初始化了,但是本身还是有个类似于padding、margin的高度,这是用padding、margin是没办法消除掉的,也知道本次项目中才知道有个方法可以解决此类问题,真是解决了困扰已久的大麻烦哈~也怪自己平时看的书少,到现在才知道,这个强有力的武器就是将line-height设置为1就OK了,写法是这样的line-height: 1;px都省了,~\(≧▽≦)/~

时间: 2024-08-29 18:48:10

完美解决png8毛边问题的相关文章

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

完美解决office2013 错误1402

遇到1402问题  按照网络上的帖子都无法解决,老提示无权限更改,原来只是少了一个步骤而已!经本人多次试验,已经完美解决,现在上图! 步骤  肯定是得先出现错误,找到注册表所在项! 这个就不赘述,通过运行,regedit,按着找就行了啦~  就是这个,无权限~~只要右击该项,点权限,点确定  这里点添加  输入:administrator  确定 勾选完全控制,然后点高级~ 最关键的一步!!在所有者这里点击一下administrators  然后再点击一下应用,然后确定返回~!  快要完成了~

完美解决IE8有两个进程的问题

完美解决IE8有两个进程的问题,照以下方法设置后就只有一个进程了,没有什么负影响哦! 方法: 1.win+R,在运行框里输入:gpedit.msc,回车进入组策略设置. 2.依次展开:计算机配置——管理模板——windows组件——Internet Explorer. 3.在Internet Explorer选项下面,找到“设置选项卡进程增长”,配置值为0. 提示:1是IE8的默认值,使用这种默认设置后会使你产生相当混乱的感觉,虽然说采用了颜色来标识页面的相关性,但至少我是很不喜欢,当上面的进程

完美解决Android使用Zxing扫描二维码改成竖屏后,后面的预览画面出现了拉伸,扭曲的情况

完美解决解决Android使用Zxing扫描二维码改成竖屏后,后面的预览画面出现了拉伸,扭曲的情况 第一步:找到com.zxing.camera包下的CameraConfigurationManager.java文件中的void initFromCameraParameters(Camera camera)方法 第二步:在 Log.d(TAG, "Screen resolution: " + screenResolution);后加上如下的代码 Point screenResoluti

Swift教程_swift常见问题(五)_完美解决Cannot override 'dealloc'异常

swift已经移除了dealloc()方法,所以如果重写的话会报: Cannot override 'dealloc' which has been marked unavailable 错误. swift使用析构方法进行类似dealloc的操作.析构方法和构造方法相对,分别为deinit和init. 点击进入ooppookid的博客 Swift教程_swift常见问题(五)_完美解决Cannot override 'dealloc'异常

完美解决全面屏蔽Google教程(终结者)

最近谷歌的IP被大范围的禁用了.身处一个连谷歌都用不了的过度的程序员,深感命运多舛.幸好,魔高一尺,道高一丈.下面是几种可以使用谷歌的方法. 方法一 1)在chrome浏览器中输入:chrome://flags/ 2)如下图,开启实验性 QUIC 协议和经由实验性 QUIC 协议发出的 HTTPS 请求两个选项重启浏览器,大功告成. 方法二 此次屏蔽的方法主要屏蔽Google部分IP地址的443端口,包括google.com.hk,accounts.google.com的部分IP的443端口被封

Linux安装软件时缺少依赖包的简单较完美解决方法!

大家在linux下源码安装时,有木有经常碰到缺少这个包那个包的,然后不知所措?看到最近有几个筒子安装thrift,安装python因缺少依赖包而进行不下去了.我用的是红帽,装系统的时候习惯把所有的有的没的都选择上,基本没有出现过缺少包的情况,大家可以试试. 如果装系统的时候忘了选择所有的包,来,这里有你想要的. 如果电脑可以联网,可以试试以下的yum命令,把命令copy过去贴到命令行执行下就OK了: yum -y install gcc gcc-c++ autoconf libjpeg libj

Android:完美解决listview的setonitemclicklistener 和 setontouchlistener冲突问题

@Override public boolean onTouch(View v, MotionEvent event) { createVelocityTracker(event); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: xDown = event.getRawX(); break; case MotionEvent.ACTION_MOVE: xMove = event.getRawX(); //活动的距离 int

Android—大图or多图加载解决方案(完美解决OOM问题)

在开发应用的时候,很多时候都会涉及大量图片的加载和高精度图片的加载,这两种操作都是会导致应用程序OOM(OutOfMemory)的问题发生,合理的图片加载和图片内存管理就是必须解决的问题,以下将提供一个比较完善的技术方案,解决这两个问题. 首先,我们必须明确为什么会发生OOM(OutOfMemory)的问题,其原因就是因为在APP运行过程中,所使用的系统内存超出了当前APP的最大可用内存,就发生了OOM的问题.下面,我们来估算一下在一台中高档的手机上面,加载多少图片会导致OOM:假设系统分配给A