浏览器兼容

最新推荐文章于 2022-06-10 09:26:49 发布
最新推荐文章于 2022-06-10 09:26:49 发布
阅读量436 收藏
点赞数

Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲染效果。总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。常见的就是在IE6下使用，不具体说，我想大家都有碰到过了。下面我们就一起来看看所有浏览器都具有什么Hack，换句话说，各种浏览器都能识别哪些CSS的写法。

下面是我收集有关于各浏览器下Hack的写法

1、Firefox

@-moz-document url-prefix(){
			  .selector{
			     property: value;}
			}

上面是仅仅被Firefox浏览器识别的写法，具体如：

@-moz-document url-prefix(){
			  .demo{
			     color:lime;}
			}

支持Firefox的还有几种写法：

/* 支持所有firefox版本 */#selector[id=selector]{ property: value;}
			或者：
			@-moz-document url-prefix(){ .selector{ property: value;} } 

			/* 支持所有Gecko内核的浏览器 (包括Firefox) */
			*>.selector{ property: value;}

2、Webkit枘核浏览器(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0)	{
				Selector{ property: value;}
			}
针对谷歌浏览器
/* Chrome 28+ (Chrome is version 40 at the time of this posting) */@supports(-webkit-appearance:none){.chrome_only {

       color:#0000FF; 
       background-color:#CCCCCC;}}
The block of Chrome versions 22-28 (If needed to support older versions) are also possible to target with a twist on my Safari combo hacks I posted above:
/* Chrome 22-28 */@media screen and(-webkit-min-device-pixel-ratio:0){.chrome_only {-chrome-:only(;

       color:#0000FF; 
       background-color:#CCCCCC;);}}
针对safari 浏览器

    
    

        
        
        
        

         
         
There is a way to filter Safari 5+ from Chrome:

        
        
@media screen and(-webkit-min-device-pixel-ratio:0){/* Safari and Chrome */.myClass {
     color:red;}/* Safari only override */::i-block-chrome,.myClass {
     color:blue;}}
@media screen and(-webkit-min-device-pixel-ratio:1){
	::i-block-chrome,.order-list-container .order-item .order-title .order-time {

     margin-left:-20px;

     }

 }
/* Safari 6.1-7.0 */@media screen and(-webkit-min-device-pixel-ratio:0)and(min-color-index:0){.safari_only {(;

      color:#0000FF; 
      background-color:#CCCCCC;);}}
iOS 8/Safari 8 just got released so here is one I have worked out for the new browser:
/* Safari 7.1+ (8.0 is the latest version of Safari at this time) */

_::-webkit-full-page-media, _:future,:root .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC;}


上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器：

@media screen and (-webkit-min-device-pixel-ratio:0)	{
				.demo{ color:#f36;}
			}

3、Opera浏览器

html:first-child>b\odySelector{property:value;}
			或者：
			@media all and (min-width:0) {
				Selector{property: value;}
			}
			或者：
			@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
				head~bodySelector{ property: value;}
			}

上面则是Opera浏览器的Hack写法：

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
				head~body.demo{ background: green;}
			}

4、IE9浏览器

:rootSelector{property: value\9;}

上面是IE9的写法，具体应用如下：

:root.demo{color:#ff0\9;}

5、IE9以及IE9以下版本

Selector{property:value\9;}

这种写法只有IE9以及IE9以下版本能识别，这里需要注意此处“\9”只能是“\9”不能是别的，比如说“\8”，不然会失去效果的，如：

.demo{background: lime\9;}

6、IE8浏览器

Selector{property: value/;}
				或者：
				@media \0screen{
					Selector{property: value;}
				}

上面写法只有IE能识别，如：

.color{color:#fff/;}
			或者：
			@media \0screen{
				.color{color:#fff;}
			}

7、IE8以及IE8以上的版本

Selector{property: value\0;}

这种写法只有IE8以及IE8以上版本支持，如

.demo{color:#ff0\0;}

8、IE7浏览器

			*+htmlSelector{property:value;}
			或
			*:first-child+htmlSelector{property:value;}

上面两种是IE7浏览器下才能识别，如：

			*+html.demo{background: green;}
			或者：
			*:first-child+html.demo{background: green;}

9、IE7及IE7以下版本浏览器

Selector{*property: value;}

上面的写法在IE7以及其以下版本都可以识别，如：

.demo{*background: red;}

10、IE6浏览器

			Selector {_property/**/:/**/value;}
			或者：
			Selector {_property: value;}
			或者：
			*html Selector {property: value;}

具体应用如下：

			.demo {_width/**/:/**/100px;}
			或者：
			.demo {_width: 100px;}
			或者：
			*html .demo {width: 100px;}

11、苹果浏览器

具体方法是针对safari浏览器做HACK
css样式名称前加：body:nth-of-type(1) 即：
body:nth-of-type(1) #ys{color:red;} 
<div id="ys">内容</div>


color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

上面具体介绍了各种版本浏览器下如何识别各种的Hack写法，包括了IE6-9以及现代版本的浏览器写法。综合上面的所述，我们针对不同浏览器的Hack写法主要分为两种从CSS选择器和CSS属性上来区别不同的Hack写法。下面我们分别来看这两种的不同写法：

CSS选择器的Hack写法

下面我们主要来看CSS选择器和CSS属性选择器在不同浏览器的支持情况。下面先来看CSS选择器支持情况。

CSS选择器的Hack写法

1、IE6以及IE6以下版本浏览器

			* html.demo{color: green;}

2、仅仅IE7浏览器

			*:first-child+html .demo {color: green;}

3、除IE6之外的所有浏览器（IE7-9, Firefox,Safari,Opera）

html>body.demo{color: green;}

4、IE8-9,Firefox,Safari,Opear

			html>/**/body .demo {color: green;}

5、IE9+

:root.demo{color: red;}

6、Firefox浏览器

@-moz-document url-prefix(){
			  .demo{
			     color: red;}
			}

6、Webkit内核浏览器（Safari和Google Chrome）

@media screen and (-webkit-min-device-pixel-ratio:0)	{
				.demo{ color: red;}
			}

7、Opera浏览器

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
				head~body.demo{ color: red;}
			}

8、iPhone / mobile webkit

@media screen and (max-device-width: 480px) {
				.demo{ color: red  }
			}
CSS属性Hack写法

1、IE6浏览器

.demo{_color: red;}

2、IE6-7浏览器识别

.demo{*color: red;}

3、所有浏览器除IE6浏览外

			.demo {color/**/:red;}

4、IE6-9浏览器

.demo{color: red\9;}

5、IE7-8浏览器

			.demo {color/*\**/:red\9;}

上面罗列的都是各种浏览器下的有关于CSS的Hack的写法，基中有针对于现代浏览器Safari,Google Chrome和Firefox的写法，而且也有针对于我们前端人员最讨厌的IE6-9的各版本浏览器的Hack的写法，而且这些Hack我们又分为CSS选择器的Hack写法和CSS属性的Hack写法。然而具体何种适用，大家可以要据自己的需求来定，下面列出我个人的两种写法：

一、经济实惠型定法：

这种写法注重单独的CSS的Hack写法。不同的浏览器使用不同的Hack写法，其实也只是以IE的Hack写法比较多（因为我们写Hack也主要是针对IE的浏览器）特别是IE6下的浏览器。单独为各种浏览器写Hack的好处是：针对各种浏览顺的Hack写法省力易记。因为其他的浏览器主要是针对现代浏览器，相对来说是比较少的。针对于这种Hack的使用，我推荐使用下面的方法：

.demo{
				color: red;/*所有现代浏览器*/color: green\9;/*所有IE浏览器*/color: lime\0;/*IE8-9浏览器*/*color: red;/*IE6-7浏览器*/+color: blue;/*IE7浏览器*/_color: orange;/*IE6浏览器*/}@media all and (min-width:0px){
				color: #000;/*Webkit和Opera浏览器*/
			}
			@media screen and (-webkit-min-device-pixel-ratio:0) {
				color: #f36;/*Webkit内核浏览器*/
			}
			@media all and (-wekit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
				head~body.demo{color:#369;}/*Opera*/
			}
			@-moz-document url-prefix(){ 
				.demo{color:#ccc;}/* all firefox */
			}
二、完美主义写法

这种方法是追求完美主义的写法，主要是配合我们上一节所说的IE条件注释，全部采用选择器Hack的写法。这种写法分两步：

1、创建条件样式表，并在HTML中body里添加相应的class类名：

<!--[if IE6]--><bodyclass="ie6"><<![endif]--><!--[if IE7]--><bodyclass="ie7"><![endif]--><!--[if IE8]--><bodyclass="ie8"><![endif]--><!--[if IE9]--><bodyclass="ie9"><![endif]--><!--[if !IE]--><bodyclass="non-ie"><![endif]-->

2、接着创建对应的样式

.demo{color: blue;}/*现代浏览器*/.non-ie.demo{color: red;}/*除IE外浏览器*/.ie9.demo{color: yellow;}/*IE9浏览器*/.ie8.demo{color: green;}/*IE8浏览器*/.ie7.demo{color: orange;}/*IE7浏览器*/.ie6.demo{color: lime;}/*IE6浏览器*/@media all and (min-width: 0px){ 
				.demo{color:black;}/* webkit and opera */
			}
			@media screen and (-webkit-min-device-pixel-ratio:0){ 
				.demo{color:#369;}/* webkit */
			}
			@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
				head~body.demo{color:#cf6;}/* opera */
			}
			@-moz-document url-prefix(){ 
				.demo{color:#963;}/* firefox * /
			}

上面就是目前各种浏览器下，相关CSS的Hack的写法，下面我们具体来看一个实例：

HTML Markup

<divclass="demo">test color</div>

CSS Code

.demo{
				color: red;/*所有现代浏览器*/color: green\9;/*所有IE浏览器*/color: lime\0;/*IE8-9浏览器*/*color: red;/*IE6-7浏览器*/+color: blue;/*IE7浏览器*/_color: orange;/*IE6浏览器*/}:root.demo{color:#963\9;}@-moz-document url-prefix(){ 
				.demo{color:#897;}/* all firefox */
			} 
			@media screen and (-webkit-min-device-pixel-ratio:0)	{
				.demo{ color:#000;}/*webkit*/
			}
			@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)	{
				head~body.demo{ color: red;}/*opera*/
			}

请看最终效果图：

请面罗列了各浏览器下的Hack的写法，大家写浏览的CSS Hack时也可以参考下面的图表

IE 选择器 Hack

一、Chrome浏览器

选择器Hack

/* Chrome 24- and Safari 5- */::made-up-pseudo-element, .selector{
  代码放在这里
}

媒体查询Hacks

/* Chrome, Safari 3+ */@media screen and (-webkit-min-device-pixel-ratio:0) {
  代码放在这里	
}

JavaScript Hack

/* Chrome */var isChrome = Boolean(window.chrome);
二、Firefox浏览器

属性选择器Hack

/* Firefox 1.5 */body:empty.selector{
 样式代码放这里
}/* Firefox 2+ */.selector, x:-moz-any-link{
 样式代码放这里	
}/* Firefox 3+ */.selector, x:-moz-any-link; x:default{
 样式代码放这里	
}/* Firefox 3.5+ */body:not(:-moz-handler-blocked).selector{
 样式代码放这里	
}

媒体查询Hack

/* Firefox 3.5+, IE 9/10, Opera */@media screen and (min-resolution: +72dpi) {
 样式代码放这里		
}
/* Firefox 3.6+ */@media screen and (-moz-images-in-menus:0) {
 样式代码放这里		
}
/* Firefox 4+ */@media screen and (min--moz-device-pixel-ratio:0) {
 样式代码放这里		
}

JavaScript Hack

/* Firefox */var isFF = !!navigator.userAgent.match(/firefox/i);

/* Firefox 2 - 13 */var isFF = Boolean(window.globalStorage);

/* Firefox 2/3 */var isFF = /a/[-1]=='a';

/* Firefox 3 */var isFF = (functionx(){})[-5]=='x';

混合型Hack

/* Firefox 3+ */@-moz-document url-prefix(){
 样式代码放这里		
}
三、Opera浏览器

属性选择器Hack

/* Opera 9.25, Safari 2/3.1*/*|html[xmlns*=""] .selector {
 样式代码放这里	
}

/* Opera 9.27and below, Safari 2*/
html:first-child .selector {
 样式代码放这里	
}

/* Opera 9.5+ */
noindex:-o-prefocus, .selector {
 样式代码放这里	
}

媒体查询Hack

/* Opera 7*/@media all and (min-width: 0px){
 样式代码放这里		
}

/* Opera 12- */@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
 样式代码放这里		
}

/* Opera, Firefox 3.5+, IE 9/10*/@media screen and (min-resolution: +72dpi) {
 样式代码放这里		
}

/* Opera, IE 8/9/10*/@media screen {
 样式代码放这里		
}

JavaScript Hack

/* Opera 9.64- */var isOpera = /^function \(/.test([].sort);

/* Opera 12- */
var isOpera = Boolean(window.opera);
四、Safari浏览器

属性选择器Hack

/* Safari 2/3*/
html[xmlns*=""] body:last-child .selector {
 样式代码放这里		
} 
html[xmlns*=""]:root .selector  {
 样式代码放这里		
}

/* Safari 2/3.1, Opera 9.25*/*|html[xmlns*=""] .selector {
 样式代码放这里		
}

/* Safari 5- and Chrome 24- */
::made-up-pseudo-element, .selector {
 样式代码放这里		
}

媒体查询Hack

/* Safari */var isSafari = /a/.__proto__=='//';
五、IE浏览器

选择器Hack

/* IE 6 and below */
* html.selector{
 样式代码放这里		
}.suckyie6.selector{
 样式代码放这里		
}/* .suckyie6 can be any unused class *//* IE 7 and below */.selector, {
 样式代码放这里		
}/* IE 7 */
*:first-child+html.selector{
  样式代码放这里	
}.selector, x:-IE7{
 样式代码放这里		
} 
*+html.selector{
 样式代码放这里		
}/* Everything but IE 6 */html > body.selector{
 样式代码放这里		
}/* Everything but IE 6/7 */html > /**/body.selector{
  样式代码放这里	
}head ~ /* */body.selector{
 样式代码放这里		
}/* Everything but IE 6/7/8 */:root *> .selector{
 样式代码放这里		
}body:last-child.selector{
 样式代码放这里		
}body:nth-of-type(1).selector{
 样式代码放这里		
}body:first-of-type.selector{
 样式代码放这里		
}

属性/属性值 Hack

/* IE 6 */
.selector { _color: blue; } 
.selector { -color: blue; }

/* IE 6/7 - any combination of these characters: 
 ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : <  > | */
.selector { !color: blue; } 
.selector { $color: blue; } 
.selector { &color: blue; } 
.selector { *color: blue; } 
/* ... *//* IE 6/7 - acts as an !important */
.selector { color: blue !ie; } 
/* string after ! can be anything *//* IE 8/9 */
.selector { color: blue\0/; } 
/* must go at the END of all rules *//* IE 9/10 */
.selector:nth-of-type(1n) { color: blue\9; }

/* IE 6/7/8/9/10 */
.selector { color: blue\9; } 
.selector { color/*\**/: blue\9; }

 /* Everything but IE 6 */
.selector { color/**/: blue; }

媒体查询Hack

/* IE 6/7 */@media screen\9{
 样式代码放这里		
}

/* IE 6/7/8 */@media \0screen\,screen\9{
 样式代码放这里		
}

/* IE 8 */@media \0screen {
 样式代码放这里		
}

/* IE 8/9/10 & Opera */@media screen\0{
 样式代码放这里		
}

/* IE 9/10, Firefox 3.5+, Opera */@media screen and (min-resolution: +72dpi) {
 样式代码放这里		
}

/* IE 9/10 */@media screen and (min-width:0\0) {
 样式代码放这里		
}

/* IE 10+ */@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 样式代码放这里		
}

/* Everything but IE 6/7/8 */@media screen and (min-width: 400px) {
 样式代码放这里		
}

JavaScript Hack

/* IE <=8 */
varisIE = '\v'=='v';
/* IE 6 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 6]><i></i><![endif]-->"; 
var isIE = checkIE.getElementsByTagName("i").length == 1;	

/* IE 7 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 7]><i></i><![endif]-->"; 
var isIE = checkIE.getElementsByTagName("i").length == 1;
navigator.appVersion.indexOf("MSIE 7.")!=-1	

/* IE 8 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 8]><i></i><![endif]-->"; 
var isIE = checkIE.getElementsByTagName("i").length == 1;	

/* IE 9 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 9]><i></i><![endif]-->"; 
var isIE = checkIE.getElementsByTagName("i").length == 1;	

/* IE 10 */var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;	

/* IE 10 */var isIE = document.body.style.msTouchAction != undefined;

上面列出各个浏览器下hack的写法，当然在实际运用之中并不建议使用hack。如果你的页面需要hack来处理时，请先检查你的css或者js，如果实在无法达到要求，在考虑使用hack来处理。
maowj98
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iframe 全屏
qq_26318597的博客
03-09 166
style="width: 100%;height: 100%" allowfullscreen='true'
ie自带css定位,如何仅定位样式表中的IE（任何版本）？
weixin_30824391的博客
08-03 150
这是一组媒体查询，允许您为任何版本的Internet Explorer(从IE6到IE11 +)，Firefox，Chrome和Safari(EDIT：还添加Opera)执行此操作。IE 6*html.ie6{property:value;}要么.ie6{_property:value;}IE 7*+html.ie7{property:value;}要么*:first...
safari only css hack,CSS hack for Safari ONLY
weixin_34298263的博客
08-03 196
Updated info due to changes in web development since this was asked and HTML5 has become the new standard:html[xmlns*=""] body:last-child #widget { background:#f00; }html[xmlns*=""]:root #widget { ba...
浏览器兼容性判断
野蛮女孩的博客
06-10 394
IE 6
fullpage的使用方法及配置项 （慕课网视频总结）
Jana Jing的分享
03-12 6058
 原文：http://www.qdfuns.com/notes/19279/4d057d633ce51a194ea3acea82029640.html 关于fullpage Fullpage.js是一个基于jquery的插件，他可以非常方便、很轻松的制作一个全屏网站： 1.支持鼠标滚动 2.多个回调函数 3.支持手机、平板等触摸事件 4.支持css3动画 5.支持窗口缩放
常见浏览器兼容问题
08-08
### 常见浏览器兼容问题 在Web开发中，浏览器兼容性问题一直是开发者们需要面对的重要挑战之一。不同浏览器对CSS、HTML等标准的支持程度不一，常常导致页面在不同浏览器下显示效果各异。本文将根据提供的部分描述，...
jQuery解决浏览器兼容性问题案例分析
10-22
在Web开发中，浏览器兼容性问题一直是个棘手的问题，尤其是在JavaScript和DOM操作方面。jQuery作为一款广泛使用的JavaScript库，其核心目标之一就是提供一种跨浏览器的解决方案，以简化JavaScript编程，尤其是解决...
浏览器兼容资料
12-01
这个压缩包文件"浏览器兼容资料"包含了帮助开发者解决这个问题的重要资源，包括文档说明和实例。 首先，我们要理解浏览器兼容性的本质。不同的浏览器由不同的公司开发，它们可能对Web标准的支持程度不一，有的...
浏览器兼容测试工具
08-24
浏览器兼容性测试是Web开发过程中不可或缺的一环，因为不同的浏览器可能会有不同的解析标准和实现方式，导致同一段代码在不同浏览器中的表现不一致。为了解决这个问题，开发者通常需要借助各种浏览器兼容测试工具来...
解决微信h5页面视频播放的部分大坑
milli236的博客
11-03 5263
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> my video html,body { padding: 0;
Safair css hack
weixin_30512089的博客
12-28 217
一下方式不会影响chrome浏览器样式 _::-webkit-full-page-media, _:future, :root .class{ /*此处放css样式*/ } 转载于:https://www.cnblogs.com/zzd0916/p/8135375.html
关于各大浏览器兼容问题（1）
smouns_的博客
04-08 933
关于各大浏览器兼容问题
收集各种浏览器的Hack写法
huang714的专栏
03-23 223
下面是我收集有关于各浏览器下Hack的写法 1、Firefox 黑体部分为适应浏览器而新增加的识别代码 @-moz-document url-prefix() { 　　.selector { 　　　　property: value; 　　} } 支持Firefox的还有几种写法： #selector[id=selector]{ //id选择器 　　property: va...
h5video标签
a560694091的博客
07-28 137
在video标签中，我们可以使用属性：videoWidth & videoHeight，它获取的是video的宽度和高度（媒体本身）。虽然不能直接使用，但是可以通过计算宽高比得到 video 占用的宽度和高度。比如让 video 占满宽度为480px的容器，可以根据宽高比得到此时video占用的高度。 重要： h5的video标签，修改source的src地...
基于SpringCloud微服务架构的B2C电子商务系统-可执行内含文档代码-可执行内含文档代码.zip
最新发布
07-28
基于SpringCloud微服务架构的B2C电子商务系统-可执行内含文档代码-可执行内含文档代码.zip
Web前端浏览器兼容性解决方案
"这篇内容主要讨论了Web前端开发中遇到的浏览器兼容性问题，包括默认内外边距、水平和垂直居中、高度处理、IE6的特定问题等，并提供了相应的解决方案。" 在Web开发中，浏览器兼容性是前端开发者面临的一大挑战。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值