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 */
从上图可以分析出以下几种情况:
2、\9 :所有IE浏览器都支持
3、_和- :仅IE6支持
4、* :IE6、E7支持
5、\0 :IE8、IE9支持,opera部分支持
6、\9\0 :IE8部分支持、IE9支持
7、\0\9 :IE8、IE9支持
如何解决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