前端中的hack,很多人的回答如下:
由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果
总之.就是一句话,
针对不同浏览器编写带有前缀的css 就是 css hack,也就是大家所说的前端hack了
举个例子:
.table .table-disabled {
color: #e4eaec;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
css hack原理
针对不同的浏览器编写不同的样式代码
css hack方式
1. 属性前缀法(类内部hack)
width:100px;
+width:100px; //IE6 IE7
*width:100px; // IE6 IE7
width:200px/9 //IE6~IE10
不同浏览器兼容的代码
-moz-transform: rotate | scale | skew | translate ; //firefox3.5+
-webkit-transform: rotate | scale | skew | translate ; //Webkit内核浏览器
-o-transform: rotate | scale | skew | translate ; //Opera
-ms-transform: rotate | scale | skew | translate ; //IE9
transform: rotate | scale | skew | translate ;//标准模式
2. 选择器前缀法(选择器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有效
3. 条件注释法
这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。举例如下
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
css hack弊端
hack其实相当于是欺骗浏览器的行为,在解决浏览器兼容性方面,代码编码的复杂度变高,容易出现编写了一堆代码后,出现新的不同浏览器间的兼容性问题.所以不太推荐通过hack的方式解决浏览器兼容问题.
参考链接:
https://www.jianshu.com/p/a65486c56d19.
https://www.cnblogs.com/mumble/p/4576489.html.