CSS Hack:区分IE6/IE7/IE8/Firefox

猎狐狸

猎狐狸

2016-02-19 17:25

今天图老师小编给大家介绍下CSS Hack:区分IE6/IE7/IE8/Firefox,平时喜欢CSS Hack:区分IE6/IE7/IE8/Firefox的朋友赶紧收藏起来吧!记得点赞哦~

  今天被在修改CSS的时候,突然碰到要单独Hack IE8的。当然,用注释非常方便,只要添加相应的注释就可以解决。但问题是,为了一句CSS写多一个文件,或者在header上添加注释,那显然不是懒人的习惯做法。结论如下:

selector{
property:value; /* 所有浏览器 */
property:value9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}

  当然,注意顺序。根据CSS的优先性,上面的写法,分别针对Firefox、IE8、IE7和IE6显示值。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  演示的CSS代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

p.ie{
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15;
color:blue; // 所有浏览器
color:brown9; // 所有IE浏览器
+color:red; // IE7
_color:green; // IE6
}

  哈,事实就这么简单。你看到的是那一句话呢?如果你多个浏览器都测试了,就会看到,显示的文字和颜色是不同的。为什么?看看我的HTML中这个段落是这样写的:

p class="ie"
span style="display:block;display:none9;"嘿嘿,小子竟然也用Firefox,蓝色文字。/span
!--[if IE 8]不错不错,挺先进的嘛,使用IE8呢!文字是褐色的。![endif]--
!--[if IE 7]你,IE7,红色文字!![endif]--
!--[if IE 6]孩子,虽然显示的是绿色文字,不过,IE6可不是好东西呢!![endif]--
/p

  对,就是IE条件注释+CSS的结果。顺路学一下IE条件注释吧。不用再举例了吧,一看就知道那个对那个了。

展开更多 50%)
分享

猜你喜欢

CSS Hack:区分IE6/IE7/IE8/Firefox

Web开发
CSS Hack:区分IE6/IE7/IE8/Firefox

区分IE6,IE7和firefox的CSS hack

Web开发
区分IE6,IE7和firefox的CSS hack

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

IE8、IE7、IE6、FF简单的CSS HACK测试

Web开发
IE8、IE7、IE6、FF简单的CSS HACK测试

解决IE6、IE7、Firefox兼容最简单的CSS Hack

Web开发
解决IE6、IE7、Firefox兼容最简单的CSS Hack

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

针对firefox ie6 ie7的css样式

Web开发
针对firefox ie6 ie7的css样式

JS区别IE6、IE7、IE8之间的方法

Web开发
JS区别IE6、IE7、IE8之间的方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win8启动项管理搬家图文教程

Win8启动项管理搬家图文教程

在Word2010中插入问候语进行邮件合并

在Word2010中插入问候语进行邮件合并
下拉加载更多内容 ↓