以前写过《IE8的css hack》,ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下:
[code=”css”]
select {
background-color:red\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/
*background-color:#dddd00; /* ie 7*/
_background-color:#CDCDCD; /* ie 6*/
}
[/code]
注意写hack的顺序,其中:
- background-color:red\0;IE8和IE9都支持;
- background-color:blue\9\0; 仅IE9支持;
更多其他hack关注:https://www.7psus5.com/archives/1681。
感谢mxclion,感谢内部参考群!
===============华丽的分割线===============
今天在上看到另一种hack:
[code=”css”]
#element {
color:orange;
}
#element {
*color: white; /* IE6+7, doesn’t work in IE8/9 as IE7 */
}
#element {
_color: red; /* IE6 */
}
#element {
color: green\0/IE8+9; /* IE8+9 */
}
:root #element { color:pink \0/IE9; } /* IE9 */
[/code]
帅,不过还是喜欢用条件注释html。
如果使用 background:blue\9 的话, 就会有问题
缩写属性需要单独写才能有效, 比如 margin, padding 这些
@任平生, 好吧,其实说的是 background:blue\9 的话就会有问题。之前写漏了。
也可以这么写:
.class{ background:blue} /* ie8 ie9 */
:root .class{ background:orange} /* ie 9*/
ie9 支持 :root 选择器,也支持 的hack,所以可以利用这个来单独hack ie9
@任平生, \9 \ 0 中的 \ 0会被过滤掉???
@任平生,
应该是\9会被过滤掉吧!
@任平生, 重新写一遍:
好吧,其实说的是 background:blue\9 \ 0 的话就会有问题。之前写漏了。
也可以这么写:
.class{ background:blue\ 0} /* ie8 ie9 */
:root .class{ background:orange\ 0} /* ie 9*/
ie9 支持 :root 选择器,也支持 \ 0 的hack,所以可以利用这个来单独hack ie9
请自动无视 \ 0 中间的空格… =_=
@任平生,
:root .class{ background-color:orange; }这样opera也认识;
个人认为应该:
:root .class{ background-color:orange\9; } /* IE9 */
好 感谢分享
求分享多模式浏览器调试工具……
@i-designers, 记录一下,顺便帮你回答个问题:ieTester还不错,也有些集成的浏览器,不过感觉ieTester经常在js方面出问题,还是原生的IE好,就像码头用虚拟机
@断桥残雪, ieTester这个我知道,求楼主图片上用的调试工具……
@i-designers, 我用的是虚拟机!用的是VMlite,你可以google一下
好久不用hack了,
条件注释比较和谐
哈哈,了解一下,一般就是 background-color
*background-color:#dddd00;
这个貌似也支持IE6
刚好在找IE9的hack
我喜欢用来测试的 FUCK IE…… 我的博客(才弄好不久 也没几篇文章呢)已经添加了贵站的链接,求一个友情链接~
还有也想加入 js丛林 和 Tian交流群
纠正一下第二种方法:
*color: white; 对IE都有效
@rains, 不知道你用什么工具测试的 但是*对IE8 9 是不起作用的 你可以再试试
我的博客主题侧边栏给主流浏览器和低版本IE使用不同的样式 用hack做的 发现那个 opera也可以识别的 google过了没查到什么有用的 难道说现在根本无视opera
汗 我上一个回复是说 \ 0 这个hack opera也可以识别 。。
@LiZn, 无视opera的飘过!
@, -。-好吧,没人要求的话我也无视opera了。再次求友情链接一个哈哈。。
@LiZn, 亲!带单位的 opera不认识的
firefox没问题,ie9也不会有问题的,要hack的依然还是ie678.
正文有误,请尽快修改background-color:blue\9; /* ie 9*/不对
怎么评论显示不出呢 ie9hack 不是\9li连缀
给ie8注释后background:#993333\9;
再给ie9background:#993333\9;后 ie9的正常了,但是ie8的却不正常了啊???
{ *property } ie6,ie7
{ _property } ie6
{ +property } ie7
{ property:value\9; } all ie
{ property:value; } ie8,ie9
由于本人的电脑不能安装IE9,所以麻烦高手看一下网站在IE9下存在的问题,麻烦各位高手给指正一下,代码该如何修改?在此谢谢大侠了!
由于本人的电脑不能安装IE9,所以麻烦高手看一下网站在IE9下存在的问题,麻烦各位高手给指正一下,代码该如何修改?在此谢谢大侠了!https://www.jnxiangrui.com/fenju QQ756646409
background-color:blue\9; /* ie 9*/
ie8也是支持的,请修正
码头哥, \9 这个IE8也支持。我这2天测试发现的。
分享下我的笔记:
/* Chrome, Safari, Firefox */@media all and (min-width:0) { }
/* Chrome, Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) { }
/* IE6+ */
.class {
color: red\9;
}
/* IE8+ */
.class {
color: red;
}
/* IE8 only */
@media screen { }
/* IE9 only */
:root .class { }
/* 目前只发现 color、background-color 可以这样区分IE8和IE9 */
.class {
color: red; /* IE8+ */
color: blue\9; /* IE9 only */
}
哎呀~ \ 0 被过滤掉了,重新发下,注意实际使用时,中间没空格
/* Chrome, Safari, Firefox */
@media all and (min-width:0) { }
———————————————————————————-
/* Chrome, Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) { }
———————————————————————————-
/* IE6+ */
.class {
color: red\9;
}
———————————————————————————-
/* IE8+ */
.class {
color: red\ 0;
}
———————————————————————————-
/* IE8 only */
@media \ 0screen { }
———————————————————————————-
/* IE9 only */
:root .class { }
———————————————————————————-
/* 目前只发现 color、background-color 可以这样区分IE8和IE9 */
.class {
color: red\ 0; /* IE8+ */
color: blue\9\ 0; /* IE9 only */
}
fuck ie!!