hack技术
主要解决的问题
hack技术主要解决浏览器显示兼容性问题。因为不同浏览器或相同浏览器的不同版本对CSS 解析机制不同,导致页面的显示效果不相同。为了更好的用户体验需要网页能够在不同的浏览器上正常显示。
应用场景
1. HTML5和CSS3的支持
案例:IE 条件注释
对 IE 的版本和非 IE 有优秀的区分能力,是 Web 开发中常用的hack方法,能对 IE 系列产品进行单独的 HTML 代码处理,下面是cdn地址写法示例:
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
由于目前IE6/IE7/IE8还有很大一部分用户,为了让网站浏览者都能正常的访问HTML5网站,有在HTML代码中添加条件注释的必要。
- html5shiv:解决ie9以下浏览器对HTML5提出的新的元素不识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。
- respond.min:让不支持css3 Media Query的浏览器支持响应式布局。
完整HTML5代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 hack</title>
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1>我的第一篇文章</h1>
<article>
30岁的小白程序员
</article>
</body>
</html>
html5shiv.js 引用代码必须放在 <head>元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
2.css hack
- 属性前缀法
- 适用范围:IE:6.0,IE7.0,IE8.0之间的兼容
- 实例说明:
此例中我们使用了渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,此时,我们的IE8已经独立识别。 - 实例代码:
.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
/*一个用于展示的class为bb的div标签*/
< div class ="bb"></ div >
- 选择器前缀法(即选择器Hack)
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
- 不同浏览器兼容的代码:
/*firefox浏览器:firefox3.5+ -moz*/
-moz-transform: rotate | scale | skew | translate ;
/*Safari and Chrome浏览器: -webkit*/
-webkit-transform: rotate | scale | skew | translate ;
/*Opera -o*/
-o-transform: rotate | scale | skew | translate ;
/*IE9 -ms*/
-ms-transform: rotate | scale | skew | translate ;
/*W3C标准*/
transform: rotate | scale | skew | translate ;
主流浏览器 | 内核 | 参数 |
---|---|---|
firefox | Gecko | -moz |
Safari | Webkit | -webkit |
Chrome | Webkit/Blink(Chrome内核) | -webkit |
Opera | Presto/Webkit/Blink | -o |
IE9 | Trident(IE内核) | -ms |
国内浏览器 | 内核 | 参数 |
---|---|---|
360浏览器、猎豹 | IE+Chrome双内核 | -ms -webkit |
搜狗、遨游、QQ | Trident(兼容模式)+Webkit(高速模式) | -ms -webkit |
百度浏览器、世界之窗 | IE内核 | -ms |
2345 | IE+Chrome双内核 | -ms -webkit |
参考文章 五大主流浏览器及四大内核
参考文章 hack技术
参考网站地址 https://www.duitang.com/static/csshack.html