前端中的hack是什么意思?常见的hack技术以及以及hack技术的利弊

前端中的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 ; //IE9transform: 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.

前端中的hack是什么意思?常见的hack技术以及以及hack技术的利弊相关推荐

mui实现手机web前端拍照_Web前端中的常见技术名称及所实现的功能
今天小编要跟大家分享的文章是关于Web前端中的常见技术名称及所实现的功能.熟悉Web前端工作的小伙伴都知道Web中有很多的技术,想要成为一名合格的Web前端工程师你必须要一项一项的掌握技术,如Html ...
在前端中，几种常见的定位使用
在前端中,经常使用两种方式来移动盒子: 利用浮动,结合内外边距. 利用定位. 其实更加方便,更适应复杂化的是第二种方式:定位position. 在前端中,定位常见的几种形式如下: 相对定位绝对定位 ...
一文了解贪心算法和回溯算法在前端中的应用
一文了解贪心算法和回溯算法在前端中的应用一.贪心算法 1.贪心算法是什么? 2.应用场景 3.场景剖析:零钱兑换二.回溯算法 1.回溯算法是什么? 2.什么问题适合选用回溯算法解决? 2.应用场景 ...
一文了解分而治之和动态规则算法在前端中的应用
一文了解分而治之和动态规则算法一.分而治之 1.分而治之是什么? 2.应用场景 3.场景剖析:归并排序和快速排序二.动态规则 1.动态规则是什么? 2.应用场景 3.场景剖析:斐波那契数列 4.动 ...
栈在前端中的应用，顺便再了解下深拷贝和浅拷贝！
详解栈在前端中的应用一.栈是什么二.栈的应用场景三.前端与栈:深拷贝与浅拷贝 1.JS数据类型 (1)js数据类型的分类 (2)js数据类型的定义和存储方式 (3)js数据类型的判断方式 2.深 ...
有关WEB前端中的语义化
作天在变卖大学书籍时也不晓得怎么的就想起语义化这个概念,于是乎也就花点时间搞搞它.语义化标记对于刚学web前端脚本语言的童鞋来说往往都没太在意,哇哈哈,其实我也就算只比较老的菜鸟而已,本文不是说教, ...
领域驱动设计在前端中的应用
(文章末尾有抽奖送书活动) 垃圾桶现象在开始本篇文章前,我给读者们分享一个很考验人性的有趣现象,在公司洗手间的洗漱台旁边,放置了一个垃圾桶,每次我洗完手,用纸巾擦干手后,将其扔进垃圾桶,但是偶尔扔不 ...
Web前端中的JavaScript语言基础
文章目录 JavaScript主要特点 JavaScript使用形式行内JavaScript脚本内部JavaScript脚本的使用外部JavaScript脚本基本语法标识符关键字数据类型 ...
SLAM前端中的视觉里程计和回环检测
1. 通常的惯例是把 VSLAM 分为前端和后端.前端为视觉里程计和回环检测,相当于是对图像数据进行关联:后端是对前端输出的结果进行优化,利用滤波或非线性优化理论,得到最优的位姿估计和全局一致性地图. ...

前端中的hack是什么意思?常见的hack技术以及以及hack技术的利弊

css hack原理

css hack方式

css hack弊端

前端中的hack是什么意思?常见的hack技术以及以及hack技术的利弊相关推荐

最新文章

热门文章