HTML5学习第2篇——hack 技术

最新推荐文章于 2021-06-25 21:34:46 发布

水晶果冻1125

最新推荐文章于 2021-06-25 21:34:46 发布

阅读量856

点赞数

分类专栏： # HTML5 # CSS3

本文链接：https://blog.csdn.net/m0_37617778/article/details/82758861

版权

HTML5 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

CSS3

14 篇文章 0 订阅

订阅专栏

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