CSS hack

最新推荐文章于 2024-06-14 15:02:13 发布

weixin_30306905

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量75

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yahari/p/5221011.html

版权

Fri Feb 26 2016 16:57:22 GMT+0800
CSS hack

兼容各大主流浏览器CSS hack汇总如下：

  1 body:nth-of-type(1) .iehack{  
  2   color: #F00;
  3   /*
  4   对Windows IE9/Firefox 7+/Opera 10+/所有Chrome/Safari的CSS hack ，
  5   选择器也适用几乎全部Mobile/Linux/Mac browser
  6   */  
  7 }  
  8 .demo1,.demo2,.demo3,.demo4{  
  9   width:100px;  
 10   height:100px;  
 11 }  
 12 .hack{  
 13   /*demo1 */  
 14   /*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/  
 15   background-color:red; /* All browsers */  
 16   background-color:blue !important;/* All browsers but IE6 */  
 17   *background-color:black; /* IE6, IE7 */  
 18   +background-color:yellow;/* IE6, IE7*/  
 19   background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
 20   background-color:purple\0; /* IE8, IE9, IE10 */  
 21   background-color:orange\9\0;/*IE9, IE10*/  
 22   _background-color:green; /* Only works in IE6 */  
 23   *+background-color:pink; /*  WARNING: Only works in IE7 ? Is it right? */  
 24 }  
 25 
 26 /*
 27 可以通过javascript检测IE10，
 28 然后给IE10的<html>标签加上class=”ie10″ 这个类
 29 */  
 30 .ie10 #hack{  
 31   color:red; /* Only works in IE10 */  
 32 }  
 33 
 34 /*demo2*/  
 35 .iehack{  
 36   /*该demo实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序 
 37   IE6显示为：绿色， 
 38   IE7显示为：黑色， 
 39   IE8显示为：红色， 
 40   IE9显示为：蓝色， 
 41   Firefox/Chrome显示为：橘色， 
 42   （本例IE10效果同IE9,Opera最新版效果同IE8） 
 43   */  
 44   background-color:orange;  /* all - for Firefox/Chrome */  
 45   background-color:red\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */  
 46   background-color:blue\9\0;  /* ie 9/10 - for ie9/10 */  
 47   *background-color:black;  /* ie 6/7 - for ie7 */  
 48   _background-color:green;  /* ie 6 - for ie6 */  
 49 }  
 50 
 51 /*demo3 
 52 实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序 
 53 IE6显示为：红色， 
 54 IE7显示为：蓝色， 
 55 IE8显示为：绿色， 
 56 IE9显示为：粉色， 
 57 Firefox/Chrome显示为：橘色， 
 58 （本例IE10效果同IE9，Opera最新版效果也同IE9为粉色） 
 59 
 60 */  
 61 .element {  
 62   background-color:orange; /* all IE/FF/CH/OP*/  
 63 }  
 64 .element {  
 65   *background-color: blue; /* IE6+7, doesn't work in IE8/9 as IE7 */  
 66 }  
 67 .element {  
 68   _background-color: red;  /* IE6 */  
 69 }  
 70 .element {  
 71   background-color: green\0;/* IE8+9+10  */  
 72 }  
 73 :root .element { background-color:pink\0; }  /* IE9+10 */  
 74 
 75 /*demo4*/  
 76 /* 
 77 
 78 该实例是用于区分标准模式下ie6~ie10和Opera/Firefox/Chrome的hack，本例特别要注意顺序 
 79 IE6显示为：橘色， 
 80 IE7显示为：粉色， 
 81 IE8显示为：黄色， 
 82 IE9显示为：紫色， 
 83 IE10显示为：绿色， 
 84 Firefox显示为：蓝色， 
 85 Opera显示为：黑色， 
 86 Safari/Chrome显示为：灰色， 
 87 
 88 */  
 89 .hacktest{   
 90   background-color:blue;     /* 都识别，此处针对firefox */  
 91   background-color:red\9;    /*all ie*/  
 92   background-color:yellow\0; /*for IE8/IE9/10 最新版opera也认识*/  
 93   +background-color:pink;    /*for ie6/7*/  
 94   _background-color:orange;  /*for ie6*/  
 95 }  
 96 
 97 @media screen and (min-width:0){   
 98   .hacktest {
 99     background-color:black\0;/*opera*/
100   }    
101 }  
102 
103 @media screen and (min-width:0) {   
104   .hacktest {
105     background-color:purple\9; /*  for IE9/IE10  PS:国外有些习惯常写作\0，根本没考虑Opera也认识\0的实际 */
106   }  
107 }  
108 
109 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {   
110   .hacktest { 
111     background-color:green; /* for IE10+ 此写法可以适配到高对比度和默认模式，故可覆盖所有ie10的模式 */  
112   } 
113 }  
114 
115 @media screen and (-webkit-min-device-pixel-ratio:0){
116   .hacktest {
117     background-color:gray;/*for Chrome/Safari*/
118   } 
119 }    
120 
121 /* #963棕色 :root is for IE9/IE10, 优先级高于@media,
122 慎用！如果二者合用，必要时在@media样式加入 !important 才能区分IE9和IE10 
123 */  
124 /* 
125 :root .hacktest { background-color:#963\9; }  
126 */

从上图可以分析出以下几种情况：

1、大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。
2、\9 ：所有IE浏览器都支持
3、_和- ：仅IE6支持
4、* ：IE6、E7支持
5、\0 ：IE8、IE9支持，opera部分支持
6、\9\0 ：IE8部分支持、IE9支持
7、\0\9 ：IE8、IE9支持

【Thu May 12 2016 09:19:34 GMT+0800】

如何解决PC端和移动端自适应问题？

　　做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢?现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。

　　1、最小尺寸分辨率1024*768(传统17寸显示器)，则可以采用940px、960px、或者常用的980px作为最小宽度

　　2、1024*768之后稍大的分辨率就是1280*768了，则可以采用1200px或者1220px作为稍大的网页宽度

　　3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签

　　4、不支持css3、html5的脑残浏览器特别是<=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了

　　5、宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。

　　6、宽度自适应为不同宽度显示器写布局元素时常用的css

　　下面我们看下，如何用js和css来自适应屏幕的大小。

　　网页可见区域高、宽为：document.body.clientHeight||document.body.clientWidth

　　网页正文的区域高、宽为：document.body.scrollHeight||document.body.scrollWidth(包括滚轮的长度)

　　网页被卷去的上、左区域：document.body.scrollTop||document.body.scrollLeft

转载于:https://www.cnblogs.com/yahari/p/5221011.html

weixin_30306905

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS hack

Fri Feb 26 2016 16:57:22 GMT+0800CSS hack兼容各大主流浏览器CSS hack汇总如下： 1 body:nth-of-type(1) .iehack{ 2 color: #F00; 3 /* 4 对Windows IE9/Firefox 7+/Opera 10+/所有Chrome/Safari的CSS ha...
复制链接

扫一扫