浏览器兼容hack技术

秒速五厘米 2021-09-17 02:01 350阅读 0赞

什么是hack 技术：  
行业中存在各种浏览器，典型的浏览器包括 IE 、火狐、谷歌等等；同样种类的浏览器，也存在着不同的版本，如  IE6、IE7…等。  
不同浏览器对 CSS 解析机制并不是完全相同，因此会导致不同浏览器中，页面的效果各不相同。  
此时可以针对某种浏览器进行样式设置，从而达到所有浏览器显示的效果一致，这种标识不同浏览器的方法就是 hack  
简单地说就是可以通过 hack 技术，只针对某一种或几种浏览器进行样式设置.

常用的 IE hack：

属性前缀法(即类内部Hack)

代码示例

针对的浏览器

\_width:400px;

IE6

\+width400px;

IE6 IE7

\*width:400px;

IE6 IE7

Width:200px\\9;

IE6~IE10

Width:100px\\0;

IE8~IE1

不同浏览器兼容的代码:

选择器前缀法(即选择器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有效  
IE 条件注释： IE 中的条件注释对 IE 的版本和 IE 非 IE 有优秀的区分能力，是 Web 开发中常用的hack方法，能对 IE 系列产品进行单独的 HTML 代码处理  
<!--\[if lt IE 9\]>  
　　<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script> ------解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题  
　　<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>------让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。  
<!\[endif\]—>