Windows系统下各浏览器兼容性.doc
《Windows系统下各浏览器兼容性.doc》由会员分享,可在线阅读,更多相关《Windows系统下各浏览器兼容性.doc(21页珍藏版)》请在咨信网上搜索。
1、Windows系统下各浏览器常用CSS HACK汇总表1. 此汇总表中测试浏览器的版本为:微软系统自带:IE6、 IE7、IE8火狐:Firefox 3.6.6Safari:Safari 5.0谷歌浏览器:Chrome 6.0.458.1 devOpera浏览器:Opera 10.602. 其中,多数CSS hack是在selectorproperty:value;基础上更改的。selector代表CSS选择器,property代表CSS特性,value代表特性的值。3. FF代表Firefox,Ch代表Chorme,Sa代表Safari,Op代表Opera4. Q代表Quirks Mode,
2、S代表Standards Mode。5. Hack Type列的数字,指的是上面CSS hack的实现方式中的列表号。1是指“利用浏览器对相同代码的解析和支持的不同实现的hack”,2是指以Firefox或Webkit特有的扩展样式实现的hack。一定遵守CSS hack的三条原则。CSS hack是没有办法的时候才使用的解决兼容性问题的招术,是用兼容性问题去解决兼容性问题,无异于饮鸩止渴。切莫一有兼容性问题就使用,时刻记得改掉用CSS hack修补的问题。IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例1.区别IE和非IE浏览器CSS HACK代码#divcss5bac
3、kground:blue; /*非IE 背景藍色*/background:red 9; /*IE6、IE7、IE8背景紅色*/ 2.区别IE6,IE7,IE8,FF CSS HACK【区别符号】:9、*、_【示例】:#divcss5background:blue; /*Firefox 背景变蓝色*/background:red 9; /*IE8 背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/【说明】:因为IE系列浏览器可读9,而IE6和IE7可读*(米字号),另外IE6可辨识_(底线),因此可以依
4、照顺序写下来,就会让浏览器正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。 3.区别IE6、IE7、Firefox (EXP 1) 【区别符号】:*、_【示例】:#divcss5background:blue; /*Firefox背景变蓝色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/ 【说明】:IE7和IE6可读*(米字号),IE6又可以读_(底线),但是IE7却无法读取_,至于Firefox(非
5、IE浏览器)则完全无法辨识*和_,因此就可以透过这样的差异性来区分IE6、IE7、Firefox 4.区别IE6、IE7、Firefox (EXP 2) 【区别符号】:*、!important【示例】:#divcss5background:blue; /*Firefox 背景变蓝色*/*background:green !important; /*IE7 背景变绿色*/*background:orange; /*IE6 背景变橘色*/ 【说明】:IE7可以辨识*和!important,但是IE6只可以辨识*,却无法辨识!important,至于Firefox可以读取!important但不能辨
6、识*因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。 5.区别IE7、Firefox 【区别符号】:*、!important【示例】:#divcss5background:blue; /*Firefox 背景变蓝色*/*background:green !important; /*IE7 背景变绿色*/ 【说明】:因为Firefox可以辨识!important但却无法辨识*,而IE7则可以同时看懂*、!important,因此可以两个辨识符号来区隔IE7和Firefox。 6.区别IE6、IE7 (EXP 1) 【区别符号】:*、_【示例】:#tip *background:b
7、lack; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/ 【说明】:IE7和IE6都可以辨识*(米字号),但IE6可以辨识_(底线),IE7却无法辨识,透过IE7无法读取_的特性就能轻鬆区隔IE6和IE7之间的差异。 7.区别IE6、IE7 (EXP 2) 【区别符号】:!important【示例】:#divcss5background:black !important; /*IE7 背景变黑色*/background:orange; /*IE6 背景变橘色*/ 【说明】:因为IE7可读取!important;但IE6却不行,而CSS的读取步骤是
8、从上到下,因此IE6读取时因无法辨识!important而直接跳到下一行读取CSS,所以背景色会呈现橘色。 8.区别IE6、Firefox 【区别符号】:_【示例】:#divcss5background:black; /*Firefox 背景变黑色*/_background:orange; /*IE6 背景变橘色*/ 【说明】:因为IE6可以辨识_(底线),但是Firefox却不行,因此可以透过这样的差异来区隔Firefox和IE6,有效达成CSS hack。 以上包括了IE6IE8IE7火狐浏览器兼容问题及解决方法。CSS Hack汇总快查(CSS兼容代码演示)以下是常用CSS HACK问题
9、及解决代码-DIV+CSS网支持1、屏蔽IE浏览器(也就是IE下不显示)*:lang(zh) select font:12px !important; /*FF的专用*/select:empty font:12px !important; /*safari可见*/这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。2、仅IE7识别hack*+html 当面临需要只针对IE7做样式的时候就可以采用这个HACK。3、IE6及IE6以下识别CSS HACK* html 这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不
10、识别。html/*/ body select 这句与上一句的作用相同。4、仅IE6不识别div hackselect display /*IE6不识别*/:none;这里主要是通过CSS注释分开一个属性与值,流释在冒号前。5、仅IE6识别支持.yangshi_height:20px;这里IE6支持识别CSS属性前“_”短下划线。6、仅IE6与IE5不识别select/*/ display /*IE6,IE5不识别*/:none;这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。7、仅IE5不识别select/*IE5不识别*/ display:none;这一句是在上一句中去掉了属性
11、区的注释。只有IE5不识别8、盒模型解决方法selct width:IE5.x宽度; voice-family :; voice-family:inherit; width:正确宽度;盒模型的清除方法不是通过!important来处理的。这点要明确。9、清除浮动select:after content:.; display:block; height:0; clear:both; visibility:hidden;在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题 。10、截字省略号sele
12、ct -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。11、只有Opera识别media all and (min-width: 0px) select 针对Opera浏览器做单独的设定。以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特
13、别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。12、IE的if条件Hack Only IE 所有的IE可识别 Only IE 5.0 只有IE5.0可以识别 Only IE 5.0+ IE5.0包换IE5.5都可以识别 Only IE 6- 仅IE6可识别 Only IE 6/+ IE6以及IE6以下的IE5.x都可识别 Only IE 7/- 仅IE7可识别13、仅IE8兼容识别divheight:20px9;这里的“9”仅IE8支持识别解决PNG图片在IE6中背景不透明方1、解决PNG图片在IE6中背景不透明的CSS与JS代码 - TOPJS代码function
14、correctPNG() / correctly handle PNG transparency in Win IE 5.5 & 6.var arVersion = navigator.appVersion.split(MSIE)var version = parseFloat(arVersion1)if (version = 5.5) & (document.body.filters) for(var j=0; jdocument.images.length; j+)var img = document.imagesjvar imgName = img.src.toUpperCase()if
15、 (imgName.substring(imgName.length-3, imgName.length) = PNG)var imgID = (img.id) ? id= + img.id + : var imgClass = (img.className) ? class= + img.className + : var imgTitle = (img.title) ? title= + img.title + : title= + img.alt + var imgStyle = display:inline-block; + img.style.cssText if (img.alig
16、n = left) imgStyle = float:left; + imgStyleif (img.align = right) imgStyle = float:right; + imgStyleif (img.parentElement.href) imgStyle = cursor:hand; + imgStylevar strNewHTML = img.outerHTML = strNewHTMLj = j-1 window.attachEvent(onload, correctPNG);CSS代码: #idbackground:url(图片路径) ;_filter: progid:
17、DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=图片路径);_background:none; 2、解决png图片在html中IMG标签使用PNG图片IE6中背景不透明方法 - TOP1、新建一个JS文件为iepngfx.js,进以上JS代码拷贝到JS文件里2、在HTML中声明只有IE6读取此新建JS文件iepngfx.js中只允许IE6读取此JS文件方法:3、在html中使用图片标签IMG运用PNG图片,在IE6试试看PNG图片背景是否透明了。3、在CSS中png作为网页背景时
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Windows 系统 浏览器 兼容性
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【天****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【天****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。