HTML5的一些关于兼容性问题
来源:互联网 发布:ikon日本人气 知乎 编辑:程序博客网 时间:2024/06/05 17:48
1.首先我先介绍下关于CSS hack – “\9″ hack,的浏览器兼容性问题:
由于浏览器兼容性问题,所以,对此我们将采取一些列措施来让它显示效果,所以要加入一些东西。
在这里如果对字体设置的话可以如下:
在这里我主要介绍下关于那些IE用户常遇到的问题:
.ie6_7_8{ color:blue; /*所有浏览器*/ color:red\9; /*IE8以及以下版本浏览器*/ *color:green; /*IE7及其以下版本浏览器*/ _color:purple; /*IE6浏览器*/}
part2 —— CSS hack技巧大全
- 兼容范围:
- IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome
- 参考资料:
标记 IE6 IE7 IE8 FF Opera Sarari [*+><]√√XXXX_√XXXXX\9√√√XXX\0XX√X√X@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}}XXXXX√.bb , x:-moz-any-link, x:defaultX√X√(ff3.5及以下)XX@-moz-document url-prefix(){.bb{}}XXX√XX@media all and (min-width: 0px){.bb {}}XXX√√√* +html .bb {}X√XXXX游览器内核TridentTridentTridentGeckoPrestoWebKit(以上 .bb 可更换为其它样式名)- 实例讲解:
- 此例中我们使用了渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,此时,我们的IE8已经独立识别。
- < div class ="bb"></ div >
- 大家很容易的可以看出这是情境(一)的加强版,适用于更广泛的环境。其实情境(一)中也已经做到了把火狐与IE游览器区分开来了,现在我们要做的是把火狐从其它游览器中再次识别出来。大家仔细看下代码,大家会发现其实游览器识别是很简单的。火狐如何识别?对了,IE中对伪类支持不广泛,所以伪类是个不错的途径。(.yourClass,x:-moz-any-link, x:default)注意,这个区分伪类往往IE7也能识别,所以最好还需要把IE7单独识别出来,且此方法对ff3.6 已无效,firefox的区分可以使用@-moz-document url-prefix(){}
< div class ="bb"></ div >- 我们现在将再次对我们的CSS进行加强了,使其能识别Safari(Chrome)游览器。这是基于它们的内核webkit来识别的,用法为@media screen and (-webkit-min-device-pixel-ratio:0)
< div class ="bb"></ div >- 实例的具体代码在下面实例代码中已经列出,具体效果如此页面的顶端部分效果,您可以通过不同游览器检测该效果。这次我们基本把所有的主流游览器都兼容了,大家来看下代码。Opera的识别有一部分归功于“\0”标记,这个标记只被IE8和Opera识别,特殊的标记往往造就的是我们更广泛的hack手段。下例的代码比较完整,大家可以选择参考。
- <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
- <head>
- <meta http-equiv=Content-Type content="text/html; charset=gb2312"/>
- <style type="text/css">
- </style>
- </head>
- <body>
- <table class="browsers" width="100%" cellspacing="0" cellpadding="0">
- <tr>
- <td>IE6</td>
- <td></td>
- <td>IE7</td>
- <td></td>
- <td>IE8</td>
- <td></td>
- <td>Firefox</td>
- <td></td>
- <td>Opera</td>
- <td></td>
- <td>Safari(Chrome)</td>
- <td></td>
- </tr>
- <tr class="browsercolor">
- <td class="ie6">IE6</td>
- <td></td>
- <td class="ie7">IE7</td>
- <td></td>
- <td class="ie8">IE8</td>
- <td></td>
- <td class="firefox">Firefox</td>
- <td></td>
- <td class="opera">Opera</td>
- <td></td>
- <td class="other">Safari(Chrome)</td>
- <td></td>
- </tr>
- </table>
- <div class="bb">
- <span style="display:none;display:block\0;display:none\9;">Opera的辨别色是深绿色,Opera游览器很时髦么。</span >
- <span id="firefoxTip">Firefox的辨别色是浅绿色,Firefox是很强大的游览器。</span >
- <span id="ChromeTip">Safari和Chrome的辨别色是金黄色,Safari和Chrome使用的都是Webkit内核</span >
- </div>
- </body>
- </html>
阅读全文
0 0
- HTML5的一些关于兼容性问题
- 关于浏览器的一些兼容性问题与解决方法
- 关于HTML5+js+IE兼容性问题
- 关于HTML5的一些想法
- 关于html5的一些介绍
- 关于HTML5的一些属性
- 关于HTML5的一些东西
- 关于HTML5的一些笔记
- IE6的一些兼容性问题
- 浏览器的一些兼容性问题
- 做考试系统用到的关于onbeforeunload一些兼容性问题
- 关于在项目中遇到的一些兼容性问题----img
- html5对于IE6的兼容性问题
- 关于innerHTML的兼容性问题
- 关于ie7的兼容性问题
- 关于getElementByClassName的兼容性问题
- 关于浏览器的兼容性问题
- HTML5一些语义化的标签以及在IE6~8兼容性问题
- vcenter 6u3
- 小米2018笔试题——食堂里的长桌
- Html文档与基本语法和规范
- vmware 6u3
- 三角形面积
- HTML5的一些关于兼容性问题
- list接口
- 【kali之安装配置】修改更新源sources.list,提高软件下载安装速度
- Simulate Rate limit process based on webserver logs
- windows快捷键完整版分享
- set接口
- Ubuntu 更新源
- jQuery实现单击和鼠标感应事件。
- 集合Map和泛型