当前位置:首页 > 行业观点 > 详情
sousuo
sousuo

网站建设过程中CSS透明度兼容性解决方法

上传时间:2013-12-31            浏览次数:435

  所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况,浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题
  浏览器的兼容性一直是web开发人员比较头痛的地方之一,众多的浏览器让我们有时无所适从。尤其是IE系列和其他的浏览器总是不兼容,我们通常要为IE6,7书写单独的CSS文件,甚至导致了CSSHack这一技术的流行。


  下面郑州网站建设公司野狼网络小编来谈谈,对于一些流行的CSS效果的跨浏览器解决方案。
  很多程序员都很奇怪,为什么IE就是就是不支持opacity这个属性呢?这个问题已经存在很长很长时间了,其实opacity是CSS3的属性,虽然IE不提供支持,但是IE可以通过专用的过滤器属性提供类似的透明度设置。
  是不是很奇怪,为什么IE就是和别人不一样呢?
  Css代码
  #myopacity{
  opacity:.4;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
  }
  实际上你只需要使用第二行,就支持所有的IE版本了,不过在某些场合,如果只需要给IE8设置透明度的话,而IE6,7则不需要,这种情况下,请使用第三行就好了。
  在IE中透明度的值是0-100之间的整数,而在其他浏览器中则为0-1之间的小数。
  问题点
  *filter和-ms-filter都是IE专有的CSS属性,它们通过不了W3C的验证的。
  *在IE中一旦设置了透明度属性,所有的子节点都会继承此透明度。
  所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
  在学习浏览器兼容性之前,我想把前端开发人员划分为两类:
  第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器的bug,并且他们制作的页面后期易维护,代码重用问题少,可以说是比较牢固放心的代码。
  第二类是基本按照设计图来开发的前端开发人员,很多细枝末节差距很大,不如间距,行高,图片位置等等经常会差几px。某种效果的实现也是反复调试得到,具体为什么出现这种效果还模模糊糊,整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器,而是他们的技术本身了。

本文作者:野狼优优

十六年网站建设相关经验
一站式为您提供网站相关服务

欢迎扫码咨询

发表评论
请遵守网络文明公约,理性发言
访客头像

还没有人来评论,快来抢个沙发吧!

继续浏览有关 网站建设 的文章
0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们