CSS Hack

作者: 蓝瘦额香菇 | 来源:发表于2016-11-16 00:40 被阅读23次

这里说的Hack一般是针对于IE浏览器,使用Hack的最终目的也是为解决浏览器的兼容性问题。
Hack一般分为三种:条件Hack,属性级Hack,选择符级Hack。

1. 条件Hack

如果不想在IE中看到某个区域,可以这样写:

<!--[if IE]>
<p>我只在IE9以下出现</p>
<![endif]-->

IE10以上不识别IE条件注释,如果我们想识别IE10,可以通过user-agent代理字符串。

"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; Win64; x64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; SLCC2)"
var m= /(MSIE\s)(\d+)/i.test(navigator.userAgent);
var version = (m && m[2]) ? +m[2] : -1;

大于或小于某个IE版本写法

<!-- [if gt IE 6]>
//大于IE6
<![endif] -->

<!-- [if gte IE 6]>
//大于或等于IE6
<![endif] -->

<!-- [if lt IE 6]>
//小于IE6
<![endif] -->

<!-- [if lte IE 6]>
//小于或等于IE6
<![endif] -->

2. 属性Hack

语法如下:

.test {
  color: #fff; //FF
  [;color:#ddd;]; //Chrome,Safari
  color: #fef\0; //Opera
  color: #fef\9; //IE8+(IE11不识别)
  *color: #f00; //IE7
  _color: #ff0; //IE6
}

下面列举一些工作之中常用的Hack值

  • _:IE6及以下会识别。
  • *:IE7及以下会识别。
  • \9:IE6-IE10会识别(IE11不认识)。
  • \0:IE8及以上和opera会识别(IE11也识别)。
  • [;property:value;];:Webkit浏览器会识别,IE7以下也会识别。

3. 选择符级Hack

*html #demo { color: red;} //IE6
*+html #demo { color: red;} //IE7

以后还会收录更多的hack,后续会更新。

相关文章

  • CSS hack 原理

    参考文章: CSS hack大全&详解(什么是CSS hack) 要点总结: css hack 原理是:依据不同浏...

  • 20-IE6浏览器兼容

    CSS Hack 什么是CSS Hack?针对IE的不同版本设置不同的CSS属性, 我们就称之为CSS Hack ...

  • CSS部分属性的IE兼容

    CSS-Hack 什么是CSS Hack?针对IE的不同版本设置不同的CSS属性, 我们就称之为CSS Hack ...

  • 浏览器兼容

    什么是 CSS hack CSS hack就是使你的CSS代码兼容不同的浏览器。CSS hack大致有3种表现形式...

  • HTML2

    1、ie6png的修复 2、CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件...

  • 前端面试总结(七)

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

  • 浏览器兼容

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

  • 浏览器兼容简要了解

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

  • 浏览器兼容问题

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

  • 浏览器兼容问题

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

网友评论

    本文标题:CSS Hack

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