浏览器的兼容问题
来源:互联网 发布:macbook视频拼接软件 编辑:程序博客网 时间:2024/06/05 16:02
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>
Webkit内核CSS hack(Chrome、Safari、Opera)。
注:很奇怪,在Windows10中的Edge(版本是13)下,竟然也起作用,莫非微软要向Webkit看齐?
@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { /* 这里写只在Webkit内核的浏览器下起作用的样式 */ } }
Firefox CSS hack
@-moz-document url-prefix(){
.demo { /* 这里写写只在firefox中起作用的样式 */ }
}
IE8/9/10/11 CSS hack @media screen\0 { .demo{ /* 这里写在IE 8 9 10 11下起作用的样式 */ } }
IE6/7/8 CSS hack@media \0screen\,screen\9 { .demo{ /* 这里写在IE 6 7 8 下起作用的样式 */ } }
IE9/10 CSS hack
注:IE9/10能识别CSS属性值后面的\9\0,所以想要在IE9/10下表现出来的样式,可以在后面加\9\0即可
此hack有一个问题,即设置的所有属性在IE7下都不起作用,可以使用 IE6/7 的hack来修复一下
display: none\9\0;
IE6/7 CSS hack
注:IE6/7能识别CSS属性前面的 ,所以想要在IE6/7下表现出来的样式,可以在前面面加 即可
*display:none;
IE8 CSS hack
@media \0screen\,screen\9 { .demo{ /* 这里写在IE8 下起作用的样式 */ } }
IE7 CSS hack
注:IE7的单独的CSS hack 必须结合着IE6的hack使用
*color:red;_color:green;
IE6 CSS hack
_color:green;
结束语:在工作中有时候我需要单独使用IE9 hack,但是我并没有发现有IE9的hack,如果有那位同学知道的话麻烦告知我
我写了一个例子,大家可以拷贝到自己本地,使用各种浏览器测试一下:
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>测试CSS HACK</title><style type="text/css"> /* webkit css hack */ .webkit-hack{ color:green; } @media screen and (-webkit-min-device-pixel-ratio:0) { .webkit-hack { color:red; } } /* firefox css hack */ .firefox-hack{ color:green; } @-moz-document url-prefix(){ .firefox-hack{ color:red; } } /* IE8/9/10/11 css hack */ .IE-hack{ color:green; } @media screen\0 { .IE-hack{ color:red; } } /* IE6/7/8 css hack */ .IE678-hack{ color:green; } @media \0screen\,screen\9 { .IE678-hack{ color:red; } } /*
IE9/10 css hack
他有一个问题:
无法在IE7及以下起作用即在IE7及以下2个color都不起作用,文本显示为黑色
所以可以用IE6/7的hack修复一下
*/ .IE910-hack{ color:green; color:red\9\0; *color:green; /* 修复一下,让IE6/7还是显示绿色 */ } /* IE67 css hack */ .IE67-hack{ color:green; *color:red; } /* IE8 hack */ .IE8-hack{ color:green; } @media \0screen\,screen\9 { .IE8-hack{ color:red; *color:green; } } /*
IE7 css hack
听说在傲游浏览器下也起作用?
那位同学试一下,并且把起作用的傲游浏览器版本区间告诉我
*/ .IE7-hack{ color:green; *color:red; _color:green; } /* IE6 css hack */ .IE6-hack{ color:green; _color:red; }</style></head><body><p class="webkit-hack">我在webkit内核浏览器下显示为红色,在其他非webkit内核浏览器下显示为绿色</p><p class="firefox-hack">我在firefox浏览器下显示为红色,在其他浏览器下显示为绿色</p><p class="IE-hack">我在IE8/9/10/11浏览器下显示为红色,在其他浏览器下显示为绿色</p><p class="IE678-hack">我在IE6/7/8浏览器下显示为红色,在其他浏览器下显示为绿色</p><p class="IE910-hack">我在IE9/10浏览器下显示为红色,在其他浏览器下显示为绿色</p><p class="IE67-hack">我在IE6/7浏览器下显示为红色,在其他浏览器下显示为绿色</p><p class="IE8-hack">我在IE8浏览器下显示为红色,在其他浏览器下显示为绿色</p><p class="IE7-hack">我在IE7浏览器下显示为红色,在其他浏览器下显示为绿色</p><p class="IE6-hack">我在IE6浏览器下显示为红色,在其他浏览器下显示为绿色</p></body></html>
作者: 慕男婶
链接:http://www.imooc.com/article/5247
来源:慕课网
0 0
- 一个浏览器的兼容问题
- 浏览器兼容问题的解决方案
- 浏览器的兼容问题
- 浏览器的兼容问题?
- 常见的浏览器兼容问题
- 浏览器的兼容问题
- 常见浏览器的兼容问题
- 浏览器的兼容问题解决办法
- 浏览器的兼容问题
- 常见的浏览器兼容问题
- 浏览器的兼容问题2
- 常见浏览器的兼容问题
- 浏览器的兼容问题
- 浏览器的兼容问题
- 常见的浏览器兼容问题
- 常见浏览器的兼容问题
- 浏览器兼容问题的解决
- 常见浏览器的兼容问题
- wsdl详解
- 常用正则表达式
- 标签onclick事件传参错误
- python报错MemoryError
- poj 1703
- 浏览器的兼容问题
- (原创)分享一个自定义的简单Retrofit下载工具
- 使用markdown语法撰写csdn博客
- 将博客搬至CSDN
- 分享Kali Linux 2016.2第46周镜像文件
- make File 符号意义
- plsql注册码
- Session和Cookie的区别、生命周期以及安全性
- mysql 错误 FUNCTION nlssort does not exist