继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS代码在不同浏览器兼容问题

hailun
关注TA
已关注
手记 3
粉丝 5
获赞 30

CSS hack方式一:条件注释法
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->

只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->

非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

CSS hack方式二:类内属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。
IE浏览器各版本 CSS hack 对照表
hack 写法 实例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S) IE10(Q)

  • *color 青色 Y Y Y Y N Y N Y N Y
  • +color 绿色 Y Y Y Y N Y N Y N Y
  • -color 黄色 Y Y N N N N N N N N
    _ _color 蓝色 Y Y N Y N Y N Y N N
    color 紫色 Y Y Y Y N Y N Y N Y

    \0 color:red\0 红色 N N N N Y N Y N Y N
    \9\0 color:red\9\0 粉色 N N N N N N Y N Y N
    !important color:blue !important;color:green; 棕色 N N Y N Y N Y N Y Y
    说明:在标准模式中
    “-″减号是IE6专有的hack
    “\9″ IE6/IE7/IE8/IE9/IE10都生效
    “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
    “\9\0″ 只对IE9/IE10生效,是IE9/10的hack
    body:nth-of-type(1) .iehack{
    color: #F00;/ 对Windows IE9/Firefox 7+/Opera 10+/所有Chrome/Safari的CSS hack ,选择器也适用几乎全部Mobile/Linux/Mac browser/
    }
    .demo1,.demo2,.demo3,.demo4{
    width:100px;
    height:100px;
    }

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP