今天用IE11使用卡卡网的网站速度诊断工具时,发现选项的排版是错位的,我大吃一惊,因为该工具上线有半年多时间了,开发时是经过了多浏览器兼容性测试的,当时测试的浏览器有IE8、IE9、Chrome、360、Firefox,之所以没有IE11,是因为认为只要通过IE9就可以通过IE11了,但实际上现在发现是不行的。
图一:IE11排版错位
我于是立即查看源代码,并调整宽度,但是我怎么调整,上图的排版都没有变化,很明显是调整的宽度没有生效。
图二:调整宽度无效
如上图中,我修改的宽度是“width”的数据,“#width”是为了hack IE7以下的版本,所以没有修改这个。
我于是“查看元素”(在IE11浏览器里,在某个地方点击右键,然后点击“查看元素”,即可查看该位置的html代码),看看这几个选项的css是怎样的。
图三:查看元素html代码
我大吃一惊,这些宽度竟然是图二中“#width”的宽度。原来,IE11读的是“#width”的数据而不是“width”的数据,我hack IE7和IE6的代码竟然也hack了IE11。
好吧,我把hack IE7和IE6的CSS去掉(现在用这两浏览器的用户可以忽视了),使用统一的代码。
图四:去掉hack IE7和IE6的CSS
在浏览网页,嘿嘿,整齐的排版终于出现了。
图五:整齐的排版
再“查看元素”的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] 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中采用统一的渲染模式。
注意: 前面的范例显示单独的内容值。实际上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的写在最后面。
您可能对以下文章也感兴趣