一个针对IE7的CSS Hack

IE7 修复了很多 bug，也增加了对一些选择符的支持，所以现在诸如 *html {} 和 html＞body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用，条件注释才是万无一失的过滤器，但是条件注释只能出现在 HTML 中，CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack，具体就是：

＞body
html*
*+html

这三种写法，其中前两种都是不合法的 CSS 写法，在标准兼容浏览器中被被忽略，但是 IE7 却不这么认为。对于 ＞body ，它会将缺失的选择符用全局选择符 * 代替，也就是将其处理成了 *＞body，而且不光对于 ＞ 选择符，+,~ 选择符中这个现象也存在。对于 html* ，由于 html 和 * 之间没有空格，所以也是一种 CSS 语法错误，但 IE7 不会忽略，而是错误地认为这里有一个空格。对于第三种 *+html，IE7 认为 html 前面的 DTD 声明也是一个元素，所以 html 会被选中，这三种方法中只有这一种方法是合法的 CSS 写法，也就是说可以通过校验器的验证，因此也是作者推荐的 hack 用法。

最后作者给出了最佳方式：

IE 6 and below
        Use * html {} to select the html element.
    IE 7 and below
        Use *+html, * html {} to select the html element.
    IE 7 only
        Use *+html {} to select the html element.
    IE 7 and modern browsers only
        Use html＞body {} to select the body element.
    Modern browsers only (not IE 7)
        Use html＞/**/body {} to select the body element.

具体信息参考原文：Easy CSS hacks for IE7

赞 (0)

相关推荐

  • 编写针对IE的JS代码两种编写方法

    有些时候我们需要针对某些IE下的兼容性写单独的JS处理代码.有多种做法: 1.通过检测navigation.userAgent来判断是否是IE,再编写IE分支的处理代码: 2.通过声明@cc_on 语句可以在脚本的注释内启用条件编译功能,这样对于非IE浏览器就会将识别为注释而忽略(实测,这种方式在IE6-9将适用!): 复制代码 代码如下: /*@cc_on @if (@_jscript) alert("hello world"); @end @*/

  • js优化针对IE6.0起作用(详细整理)

    js优化针对IE6.0起作用(详细整理)

    js优化针对IE6.0起作用,总结一下几点: 一,字符串拼接:用数组拼接 复制代码 代码如下: function func2(){ var start = new Date().getTime(); var array = []; for(var i = 0; i < 10000; i++){ array[i] = "<input type='button' value='a'>"; } 二,for 循环:先把长度算出来直接调用 复制代码 代码如下: function

  • 一个针对IE7的CSS Hack

    IE7 修复了很多 bug,也增加了对一些选择符的支持,所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效.虽然 CSS Hack 不推荐使用,条件注释才是万无一失的过滤器,但是条件注释只能出现在 HTML 中,CSS Hack 还是有用武之地的.Nanobot 发现了一些针对 IE7 的 CSS Hack,具体就是: >bodyhtml**+html 这三种写法,其中前两种都是不合法的 CSS 写法,在标准兼容浏览器中被

  • 特牛的FF/IE6/IE7专用CSS HACK

    这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK是针对class.id中属性的HACK,排列的顺序都具有要求.今天要和大家说的是针对class.id所做的CSS HACK. 复制代码 代码如下: .test{/*FF*/ height:20px; background-color:orange; } *+html .test{/*IE7*/ height:20px; background-color:blue; } *html .test{/*IE6*/ height:20p

  • 浏览器兼容解决FF/IE6/IE7背景专用CSS HACK

    自从互联网开始的那一刻起,各浏览器间的争斗就没有停止过.当然其中最苦的就是网页制作人员了,为了达到用户体验以及可用性的标准,不得不在多个浏览器上为统一效果而奔波.真希望哪一天FF可以一统天下,虽然现在还是IE的大天下.特别是微软最新发布的IE7浏览器,其CSS的兼容性确实给一些网页制作人员又添加了一个沉重的新负担. 为了让各浏览器有同样的显示效果,我们不得不用到CSS HACK.当然在这篇文章中我们只谈现在使用率最高的IE6和FF,以及将来可能会成为主流的IE7的CSS HACK,至于IE6以下

  • CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

  • css ie6 ie7 ff的CSS hack使用技巧

    FF浏览器 .test{ height:20px; background-color:orange; } IE7浏览器 *+html .test{/*IE7*/ height:20px; background-color:blue; } IE6浏览器 *html .test{/*IE6*/ height:20px; background-color:black; } 通过上面的CSS代码可以看出FF还是最听话的浏览器.在IE6和IE7如果要使用HACK必须要在前面加上夫级标签html. 这里就很

  • 通过CSS Hack 区分 FF/IE7/IE6/IE5.5/IE5 代码推荐

    通过CSS Hack 区分 FX/IE7/IE6/IE5.5/IE5 #example{color:red ;} * html #example{color:blue;} *+html #example{color:green;} 这是在 FireFox 或者 Opera 下面的效果 这是在 IE 6 下面的效果 这是在 IE 7 下面的效果 以下为简单区分FF/IE6/IE7示例 这行文字在FF下应为红色,在IE6下应为蓝色,在IE7下应为绿色. [Ctrl+A 全选 注:如需引入外部Js需刷

  • CSS Hack 汇总快查

    *:lang(zh) select {font:12px !important;} /*FF的专用*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 *+html {-} 当面临需要只针对IE7做样式的时候就可以采用这个HACK. IE6及IE6以下识别 * html {-} 这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可

  • CSS Hack收集汇总

    屏蔽IE浏览器(也就是IE下不显示) *:lang(zh) select {font:12px !important;} /*FF的专用*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 *+html {-} 当面临需要只针对IE7做样式的时候就可以采用这个HACK. IE6及IE6以下识别 * html {-} 这个地方要特别注意很多地主都写了

  • CSS Hack 汇总速查手册浏览器兼容必会

    屏蔽IE浏览器(也就是IE下不显示) 复制代码 代码如下: *:lang(zh) select {font:12px !important;} /*FF 可见,特别声明:由于Opera最新的更新,此句目前已经成为FF的专用HACK*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 复制代码 代码如下: *+html {-} 当面临需要只针对IE7

  • CSS hack用法案例详解

    CSS hack用法案例详解

    之前一直很狭隘的对CSS hack持有偏见,觉得写得规范的代码不应该使用这些"邪门歪道",可最近产品发布一个小问题却让我头疼了很久,最后查了一下资料,竟然使用CSS hack轻松解决了,不得不服啊,对付神奇的IE就得使用这些利器. 什么是CSS hack 由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack. 常用的CSS hack 有三种方式,CSS 内部hack.选择器hack.HTM

随机推荐