使用!important来实现IE 7的CSS Hack,必须是在同一个样式选择器中,而且同样需要在后面加_属性来复原IE 6的设置(这种方式还麻烦点,上面的方法还少写个!important) 。
文章插图
此外,IE 7也支持在选择器前添加* html ,让当前选择器成为* html的后辈选择器,只有IE 7可以识别此类样式选择器(据说某些旧版本的Opera浏览器也能识别,不过这些版本早已作古了,无需考虑) 。
文章插图
IE 7还支持在选择器前添加*:first-child html,让当前选择器成为*:first-child html的后辈选择器 。
IE 8的CSS Hack
只有IE8支持嵌套如下@media类型查询语句:@media screen 。
文章插图
IE 9的CSS Hack
没找到一个靠谱的 。
IE 10的CSS Hack
没找到一个靠谱的 。
IE 11的CSS Hack
没找到一个靠谱的 。
IE 6IE 7 的CSS Hack
如上所述,只有IE 6、IE 7可以识别加了 或*号的属性前缀 。
文章插图
FireFox、Chrome、Safari、Opera的CSS Hack
FireFox的CSS Hack
FireFox支持嵌套其专用的css语句:@-moz-document url-prefix() 。
文章插图
Chrome、Safari等Webkit内核的浏览器的CSS Hack
Chrome、Safari等采用webkit内核的浏览器支持媒体类型查询语句:@media screen and (-webkit-min-device-pixel-ratio:0) 。
文章插图
慎用的CSS Hack
网上许多与CSS Hack相关的文章中说,在css的属性值和分号之间添加字符,可以实现对IE 8或 IE 9的CSS hack(有的说,仅支持IE8) 。
网上的示例是这样的:
文章插图
} 通过实际测试发现,关于使用字符实现的上述CSS Hack有3点需要注意 。
1、IE10也能够识别添加了字符的css属性值(笔者这里没有IE 11,不知道IE 11是否也能识别) 。
2、属性值和之间不能有空格,有一个空格的话(例如:blue ),在IE 8中就失效了,仅对IE 9/IE 10有效 。
3、如果我们只想对IE 8/IE 9进行CSS Hack呢?这个时候,我们去掉后面两行与IE6、IE7有关的代码 。
文章插图
这个时候,在IE 6、IE 7浏览器中,你会发现你看到的不是红色,而是黑色(也就是默认的字体颜色)!
这是因为一般浏览器的思路是,先过滤掉无效的css属性值,然后再从正确的属性设置中根据优先级获取最后面的css属性值 。而IE 6/7浏览器不是先过滤掉无效的属性值,而是先根据优先级,获取最后面的css属性值,然后再来判断该属性值是否,无效就忽略掉 。因此,如果按照网上所说,仅仅使用来实现IE 8 的CSS Hack,则会对IE6/7中的显示效果造成破坏 。你必须通过额外的css属性设置来复原IE6/7的样式 。
因为,我们不能够简单地下结论说,使用可以实现对IE 8、IE 9甚至IE 10的CSS Hack 。
推荐阅读
- 和平精英令儿在哪直播 和平精英令儿直播间地址介绍
- 部落冲突超级巨人怎么训练
- 微信新表情打脸意思介绍
- 山阳县有什么小吃
- 财产分割不清可以先离婚吗
- 安居客怎么找房东直租
- 鹿角虫怎么折 鹿角虫的折法
- 什么是微米纺滑纱
- 和平精英令儿灵敏度分享 和平精英令儿灵敏度怎么设置