什么是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~IE9 |
不同浏览器兼容的代码:
/*Mozilla内核浏览器:firefox3.5+*/
-moz-transform: rotate | scale | skew | translate ;
/*Webkit内核浏览器:Safari and Chrome*/
-webkit-transform: rotate | scale | skew | translate ;
/*Opera*/
-o-transform: rotate | scale | skew | translate ;
/*IE9*/
-ms-transform: rotate | scale | skew | translate ;
/*W3C标准*/
transform: rotate | scale | skew | translate ;
选择器前缀法(即选择器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条件注释Hack
<!--[if IE]>此处内容只有IE可见<![endif]-->
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
<!--[if !IE 7]>此处内容只有IE7不能识别,其他版本都能识别,当然要在IE5以上。<![endif]-->
<!--[if gt IE 6]> IE6以上版本可识别,IE6无法识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if lt IE 7]> 低于IE7的版本才能识别,IE7无法识别。 <![endif]-->
<!--[if lte IE 7]> IE7以及IE7以下版本可识别<![endif]-->
<!--[if !IE]>此处内容只有非IE可见<![endif]-->