CSS hack大全(区分浏览器)
来源:互联网 发布:硬件工程师与人工智能 编辑:程序博客网 时间:2024/06/06 05:55
part1 —— 浏览器测试仪器,测试您现在使用的浏览器类型
IE6 IE7 IE8 Firefox Opera Safari
(Chrome)
您现在使用的浏览器是Safari(Chrome)。Safari和Chrome使用的都是Webkit内核。
(Chrome)
IE6
IE7
IE8
Firefox
Safari
(Chrome)
(Chrome)
您现在使用的浏览器是Safari(Chrome)。Safari和Chrome使用的都是Webkit内核。
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>
- http://www.duitang.com/static/csshack.html
0 0
- CSS hack大全(区分浏览器)
- CSS Hack 区分浏览器
- 【浏览器CSS hack大全】
- CSS Hack 各个浏览器区分汇总
- html中不同浏览器的CSS区分写法(css hack)
- CSS hack:CSS区分浏览器IE6/IE7/firefox
- 区分各浏览器的CSS hack(包含360、搜狗、opera)
- 一条可以区分常用主流浏览器的css hack
- 浏览器专属CSS HACK区分:Firefox、Safari、Opera、Interner Explorer
- 浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer
- 浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer
- 浏览器兼容 IE6、IE7、IE8、Firefox、Opera CSS hack区分
- css hack(CSS多浏览器兼容)
- CSS浏览器兼容(CSS Hack)
- css hack(CSS多浏览器兼容)
- CSS浏览器兼容方案(css hack)
- CSS hack大全&详解(什么是CSS hack)
- CSS hack是什么?IE6\7\8\9\10浏览器的CSS hack大全介绍
- jmeter学习 七
- OC方法,数字转换成汉字
- 使用CocoaPods配置第三方类库
- Collections.sort排序
- Android学习之路2 Activity 之布局
- CSS hack大全(区分浏览器)
- c++ c# 类型转换
- 面试题
- Common JS Function
- java成员变量与局部变量
- 用Python实现古诗词填字游戏(一)
- 有value时,li元素序列号就是value值,没有value,则会递增
- flashback闪回总结
- linux中永久获取root权限,出现Authentication failure的解决方法