IE11 hack css的符号原来是“#”号 _CSS

今天用IE11使用卡卡网的网站速度诊断工具时，发现选项的排版是错位的，我大吃一惊，因为该工具上线有半年多时间了，开发时是经过了多浏览器兼容性测试的，当时测试的浏览器有IE8、IE9、Chrome、360、Firefox，之所以没有IE11，是因为认为只要通过IE9就可以通过IE11了，但实际上现在发现是不行的。

IE11排版错位

图一：IE11排版错位

我于是立即查看源代码，并调整宽度，但是我怎么调整，上图的排版都没有变化，很明显是调整的宽度没有生效。

调整宽度无效

图二：调整宽度无效

如上图中，我修改的宽度是“width”的数据，“#width”是为了hack IE7以下的版本，所以没有修改这个。

我于是“查看元素”（在IE11浏览器里，在某个地方点击右键，然后点击“查看元素”，即可查看该位置的html代码），看看这几个选项的css是怎样的。

查看元素html代码

图三：查看元素html代码

我大吃一惊，这些宽度竟然是图二中“#width”的宽度。原来，IE11读的是“#width”的数据而不是“width”的数据，我hack IE7和IE6的代码竟然也hack了IE11。

好吧，我把hack IE7和IE6的CSS去掉（现在用这两浏览器的用户可以忽视了），使用统一的代码。

去掉hack IE7和IE6的CSS

图四：去掉hack IE7和IE6的CSS

在浏览网页，嘿嘿，整齐的排版终于出现了。

整齐的排版

图五：整齐的排版

再“查看元素”的html代码，如图：

查看元素的html代码

图六：查看元素的html代码

这个正是图四的css，问题终于得以解决，“#”号原来也会hack IE11 ！

知识扩展

IE6\7\8\9\10浏览器的CSS hack大全介绍

1、常见的特殊符号的应用：

IE6：

_selector{property:value;}
selector{property:value;property:value !important;} /* IE6 不支持同一选择符中的 !important */

IE7：

+selector{property:value;}

IE8：

selector{property:value\0;}

IE6 & IE7：

*selector{property:value;}

IE6 & IE7 & IE8：

selector{property:value\9;}

总结起来，如下：

其中，S表示Standards Mode即标准模式，Q表示Quirks Mode，即兼容模式。

（了解更多Quirks模式、Strict(Standars)模式？）

hack	示例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)
*	*color	Yes	Yes	Yes	Yes	No	Yes
+	+color	Yes	Yes	Yes	Yes	No	Yes
-	-color	Yes	Yes	No	No	No	No
_	_color	Yes	Yes	No	Yes	No	Yes
#	#color	Yes	Yes	Yes	Yes	No	Yes
\0	color\0	No	No	No	No	Yes	No
\9	color\9	Yes	Yes	Yes	Yes	Yes	Yes
!important	color:blue !important; color:green;	No	No	Yes	No	Yes	No

2、条件注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]>

除IE外都可识别

项目	范例	说明
!	[if !IE]	The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression. NOT运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式的意义。
lt	[if lt IE 5.5]	The less-than operator. Returns true if the first argument is less than the second argument. 小于运算符。如果第一个参数小于第二个参数，则返回true。
lte	[if lte IE 6]	The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. 小于或等于运算。如果第一个参数是小于或等于第二个参数，则返回true。
gt	[if gt IE 5]	The greater-than operator. Returns true if the first argument is greater than the second argument. 大于运算符。如果第一个参数大于第二个参数，则返回true。
gte	[if gte IE 7]	The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. 大于或等于运算。如果第一个参数是大于或等于第二个参数，则返回true。
( )	[if !(IE 7)]	Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. 子表达式运营商。在与布尔运算符用于创建更复杂的表达式。
&	[if (gt IE 5)&(lt IE 7)]	The AND operator. Returns true if all subexpressions evaluate to true AND运算符。如果所有的子表达式计算结果为true，返回true
\|	[if (IE 6)\|(IE 7)]	The OR operator. Returns true if any of the subexpressions evaluates to true. OR运算符。返回true，如果子表达式计算结果为true。

3、meta声明

由于IE8 可能会将页面按照 IE7 模式进行渲染，针对多版本IE的现状，通常会采用设置 X-UA-Compatible HTTP 头的方式将页面在IE中采用统一的渲染模式。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

注意: 前面的范例显示单独的内容值。实际上IE只会执行网页中第一个X-UA-Compatible标头。

你也可以使用内容属性来指定复数的文件兼容性模式，这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式，请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。

如果一个特定版本的IE支持所要求的兼容性模式多于一种，将採用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式，虽然并不推荐这样做。举例来说，下列标头即会排除IE7 mode。

4、其他（/*\**/注释法）

网上也流传着这样一种ie hack方法

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/

.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/

.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/

.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/

分析下：

background-color:blue; /*各个浏览器都认识，这里给firefox用；*/

background-color:red\9; /* \9所有的ie浏览器可识别； */

background-color:yellow\0; /* \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；*/

+background-color:pink; /* + ie7定了； */

_background-color:orange; /* _专门留给神奇的ie6；*/

:root #test { background-color:purple\9; } /* :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反 */
/* 复验证最终ie9特有的为:root 选择符 {属性\9;} */

@media all and (min-width:0px){ #test {background-color:black\0;} } /* 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。 */

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /* 最后这个是浏览器新贵chrome和safari的。 */

好了就这么多了，特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。

区别不同浏览器的CSS hack写法：

区别IE6与FF：

background:orange;*background:blue;

区别IE6与IE7：

background:green !important;background:blue;

区别IE7与FF：

background:orange; *background:green;

区别FF，IE7，IE6：

background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

	IE6	IE7	FF
*	√	√	×
!important	×	√	√

另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

	IE6	IE7	FF
*	√	√	×
!important	×	√	√
_	√	×	×

于是大家还可以这样来区分IE6，IE7，firefox：

background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

您可能对以下文章也感兴趣

不注意这点，\9和\0就可能对hack IE11\IE9\IE8无效
IE7/IE8/IE9/IE11 CSS hack 写法
css区分ie8/ie9/ie10/ie11 chrome firefox的代码
css巧用两符号#和下横线解决div高宽的浏览器兼容性问题

搜索

热门标签:

IE11 hack css的符号原来是“#”号

您可能对以下文章也感兴趣