美文网首页
浏览器hack

浏览器hack

作者: 大乔是个美少女 | 来源:发表于2018-03-27 20:38 被阅读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 |

不同浏览器兼容的代码:

/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)

<pre style="margin: 0px 0px 24px; padding: 0px; font-weight: bold; box-sizing: border-box; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 26px; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; white-space: pre-wrap;">*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有效</pre>

<pre style="margin: 0px 0px 24px; padding: 0px; font-weight: 400; box-sizing: border-box; background-color: rgb(255, 255, 255); overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 26px; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; white-space: pre-wrap;">IE 条件注释: IE 中的条件注释对 IE 的版本和 IE 非 IE 有优秀的区分能力,是 Web 开发中常用的hack方法,能对 IE 系列产品进行单独的 HTML 代码处理 </pre>

相关文章

  • 前端面试总结(七)

    1.什么是CSS Hack? 一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。IE浏览器Hack...

  • Hack技术

    CSS Hack来解决浏览器局部的兼容性问题,hack主要针对IE浏览器常见的有三种形式:css属性Hack,cs...

  • CSS Hack

    Hack是为解决浏览器样式兼容性而生。 链接:CSS Hack

  • 什么是 CSS Hack ?

    一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack。 IE浏览器Hack一般又分为三种,条件Hack、...

  • 12 CSS兼容

    什么是 CSS hack 简单的说,HACK就是只有特定浏览器才能识别这段hack代码。Hack也可以说是让前端最...

  • 浏览器兼容

    CSS hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mo...

  • 浏览器兼容简要了解

    CSS HACK CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mo...

  • 浏览器兼容

    主要内容: CSS hack介绍、 浏览器兼容的思路、一些工具的介绍。 CSS hack 由于不同厂商的浏览器,...

  • 浏览器兼容问题

    什么是 CSS hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safar...

  • 浏览器兼容问题

    什么是css hack css hack 由于不同厂商的浏览器,比如Internet Explorer、 Safa...

网友评论

      本文标题:浏览器hack

      本文链接:https://www.haomeiwen.com/subject/uktecftx.html