Css调节浏览器兼容性的方法总结(包括ie6透明png调节)

Css调节兼容性的方法总结(包括ie8和ie9) 浏览器兼容性hack代码区别方法

(输入代码时要按顺序):

(1)什么也没加的代码:如margin:23px;(针对所有浏览器)

(2)针对所有ie浏览器的代码(需要在后面加\9):如margin:34px\9;(只针对ie浏览器“即所有的ie都能识别,其他非ie的浏览器不能识别包括FF和一些非ie内核的浏览器”)

(3)区别ie里面的(ie7、ie6)和(ie8、ie9)的代码(需要再代码前加*):如*margin:43px;(只能区分开这两类,不能单独分开每个浏览器)

(4)区别ie里面的ie7和ie6的代码(需要在代码前加_):如_margin:54px;(此代码只有ie6能识别,这样也就能精确的分开ie7和ie6)

按顺序(1)-->(2)-->(3)-->(4),输入代码,就可以分开每个浏览器,单独调节兼容性了。(其实为什么要按顺序?想想就明白了,因为css读取代码是:同一属性的代码,下面的会覆盖上面的,读取的是最下面的一个属性值)

如(按顺序输入):

.test {

margin-left: -12px;(所有浏览器都能识别)

margin-left: 75px\9;(所有“ie”浏览器都能识别)

*margin-left: -12px;(只有ie6和ie7能识别)

_margin-left:37px;(只有ie6能识别)

}

当然,这只是一种办法,其中还有只对ie7特有的代码符号:如代码前面加*+html,只有ie7能识别(*+html margin:34px;(只有ie7能识别))

代码后面加(!important)可以同时被:ie7、FF(火狐)、ie8(以及以上版本)、一些非ie内核的浏览器识别。所以:用处并不是很大(按照个人喜欢去用,我个人不喜欢使用,这是在没出ie8以上版本之前区别ie和火狐常用的代码hack)

目前,浏览器的种类很多,ie内核的、非ie内核的常用的总共有10多款:IE,腾迅TT,QQ浏览器,360浏览器,搜狗高速浏览器,谷歌浏览器,百度浏览器,MAXTHON ,FIREFOX, OPERA ,世界之窗„„

用上面方法试调,大部分是可以正常运行的!!

ie6的png透明兼容性调节

除了上面说的那个,浏览器的兼容性最常见的一个问题就是,ie6的png不能透明问题了。

对于这个问题,一般网上是通过加入滤镜解决的。当这种方法个人觉得很麻烦,而且只能一对一的解决。

一下总结一种比较简单,可以一次让全部png透明的方法。(调用js) 一般,png不要低于png-8,只针对png-16和png-32的图进行透明处理。

方法如下:

1.首先新建txt文档-->然后把txt重命名,修改成js格式文档,可命名成iepng.js

然后:用记事本打开此文档,复制以下的代码到iepng.js里面,进行保存。

代码如下(红色部分):

(代码百度文库不允许通过,就只能另存一文档,需要可以到博客http://support.chinaccnet.com/archives/4760.html下载,或者到道客巴巴:搜索folicas就可以找到同样的文章下载)

/*就是复制以上红色的代码到iepng.js里面,保存便可*/

2.通过第一步,我们制作了,一个js文档,可以永久使用。那么接下来,就要在html里面调用这个js文档,会调用css,应该就会调用js的,代码相差无几。 Html页面调用方法如下:在和之间加入以下代码(红色部分)便可:(需要修改这里:存放这个js的文件夹名。比如:我把这个iepng.js存放在cssstyle这个文件夹里面,那么这里就要修改成cssstyle)

例子如下:

ie6下png透明处理方法

(这样,对于

如果写入的是:EvPNG.fix('*');则是对所加入的网页里面的png图片全部透明处理。

如果以上说法还不明白,可以到以下博客去看详细解说:(包括图片透明

实例在这博客底部,有几个链接,同时有做好的iepng.js下载,欢迎阅读。

如有再有问题,需要可以留言到邮箱:[email protected]

Css调节兼容性的方法总结(包括ie8和ie9) 浏览器兼容性hack代码区别方法

(输入代码时要按顺序):

(1)什么也没加的代码:如margin:23px;(针对所有浏览器)

(2)针对所有ie浏览器的代码(需要在后面加\9):如margin:34px\9;(只针对ie浏览器“即所有的ie都能识别,其他非ie的浏览器不能识别包括FF和一些非ie内核的浏览器”)

(3)区别ie里面的(ie7、ie6)和(ie8、ie9)的代码(需要再代码前加*):如*margin:43px;(只能区分开这两类,不能单独分开每个浏览器)

(4)区别ie里面的ie7和ie6的代码(需要在代码前加_):如_margin:54px;(此代码只有ie6能识别,这样也就能精确的分开ie7和ie6)

按顺序(1)-->(2)-->(3)-->(4),输入代码,就可以分开每个浏览器,单独调节兼容性了。(其实为什么要按顺序?想想就明白了,因为css读取代码是:同一属性的代码,下面的会覆盖上面的,读取的是最下面的一个属性值)

如(按顺序输入):

.test {

margin-left: -12px;(所有浏览器都能识别)

margin-left: 75px\9;(所有“ie”浏览器都能识别)

*margin-left: -12px;(只有ie6和ie7能识别)

_margin-left:37px;(只有ie6能识别)

}

当然,这只是一种办法,其中还有只对ie7特有的代码符号:如代码前面加*+html,只有ie7能识别(*+html margin:34px;(只有ie7能识别))

代码后面加(!important)可以同时被:ie7、FF(火狐)、ie8(以及以上版本)、一些非ie内核的浏览器识别。所以:用处并不是很大(按照个人喜欢去用,我个人不喜欢使用,这是在没出ie8以上版本之前区别ie和火狐常用的代码hack)

目前,浏览器的种类很多,ie内核的、非ie内核的常用的总共有10多款:IE,腾迅TT,QQ浏览器,360浏览器,搜狗高速浏览器,谷歌浏览器,百度浏览器,MAXTHON ,FIREFOX, OPERA ,世界之窗„„

用上面方法试调,大部分是可以正常运行的!!

ie6的png透明兼容性调节

除了上面说的那个,浏览器的兼容性最常见的一个问题就是,ie6的png不能透明问题了。

对于这个问题,一般网上是通过加入滤镜解决的。当这种方法个人觉得很麻烦,而且只能一对一的解决。

一下总结一种比较简单,可以一次让全部png透明的方法。(调用js) 一般,png不要低于png-8,只针对png-16和png-32的图进行透明处理。

方法如下:

1.首先新建txt文档-->然后把txt重命名,修改成js格式文档,可命名成iepng.js

然后:用记事本打开此文档,复制以下的代码到iepng.js里面,进行保存。

代码如下(红色部分):

(代码百度文库不允许通过,就只能另存一文档,需要可以到博客http://support.chinaccnet.com/archives/4760.html下载,或者到道客巴巴:搜索folicas就可以找到同样的文章下载)

/*就是复制以上红色的代码到iepng.js里面,保存便可*/

2.通过第一步,我们制作了,一个js文档,可以永久使用。那么接下来,就要在html里面调用这个js文档,会调用css,应该就会调用js的,代码相差无几。 Html页面调用方法如下:在和之间加入以下代码(红色部分)便可:(需要修改这里:存放这个js的文件夹名。比如:我把这个iepng.js存放在cssstyle这个文件夹里面,那么这里就要修改成cssstyle)

例子如下:

ie6下png透明处理方法

(这样,对于

如果写入的是:EvPNG.fix('*');则是对所加入的网页里面的png图片全部透明处理。

如果以上说法还不明白,可以到以下博客去看详细解说:(包括图片透明

实例在这博客底部,有几个链接,同时有做好的iepng.js下载,欢迎阅读。

如有再有问题,需要可以留言到邮箱:[email protected]


相关文章

  • 网站制作中遇到的浏览器兼容问题解决方法
  • 网站制作中遇到的浏览器兼容问题解决方法 自从Div+CSS布置网站页面的程序走入网站设计制作领域,因自身的优点,不断的得到网站设计制作工作者的青睐.使用Div+CSS布局网页可以大大缩减页面代码,并且可以很快的提高网页的打开速度,并且能够获 ...查看


  • 网站技术解决方案
  • 网站技术解决方案 1. 服务器自建服务器自行接入电信或者网通线路连接到internet自行配置服务器硬件 及交换机.路由器.防火墙. 2. 操作系统WINDOWS操作系统版本根据需要及系统的性质选择. 3. 网站数据库网站若不是 ...查看


  • CSS兼容的技巧
  • CSS教程:CSS兼容的技巧-浏览器兼容教程 让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ background- ...查看


  • Web前端面试题目及答案汇总 – 码农网
  • 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢迎指正.:  ) 阅读目录 HTML/CSS部分 JavaScript部分 其他 ...查看


  • 大小不固定的图片和多行文字的垂直水平居中
  • 一.大小不固定,多行文字的垂直居中 ① 单行文字 可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了.例如: 单行文字居中显示测试,css样式为:h ...查看


  • css建站感受
  • 你现在看到的是我对近学习标准化网页设计几个月的一个测试结果.这次我力争将内容与样式分离及考虑到尽可能多的重用性,在图片压缩上也花了很大功夫,但最终因为设计稿在制作的过程中没有考虑到的一些原因导致某些图片压缩效果不够理想.不过总体来说我自己对 ...查看


  • 各类格式的特点区分
  • 在用各类软件设计时相信大家肯定存在着这样的问题,各种各样的格式让大家很是迷惑.没关系,福利来了,这里就给大家介绍了各种格式的特点应用. TIFF格式 标签图像文件格式(Tagged Image File Format,简写为TIFF) 是一 ...查看


  • Web前端工作总结
  • Web前端学习总结 一.名词解释 1. 横切 在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切 2. 留白 两个容器或碎片之间的上.下.左.右的空白距离 3. 继承 元素可以从其父级元素中获得一些可为自己使用的属性或 ...查看


  • 中南民族大学--web
  • 中南民族大学 计算机科学学院 课程设计报告 课 程 网站设计与管理 题 目 个人网站设计 年 级 2013 专 业 计算机科学与技术 学 生 学 号 指导教师 夏梦 2014年 12 月 日 课程设计任务分配表 组内分工主要包括:网页布局. ...查看


热门内容