Hack技巧之条件hack

语法:

<!--[if <keywords>? IE <version>?]>HTML代码块<![endif]-->

取值:

<keywords>

if条件共包含6种选择方式:是否、大于、大于或等于、小于、小于或等于、非指定版本

是否:
指定是否IE或IE某个版本。关键字:
大于:
选择大于指定版本的IE版本。关键字: gt(greater than)
大于或等于:
选择大于或等于指定版本的IE版本。关键字: gte(greater than or equal)
小于:
选择小于指定版本的IE版本。关键字: lt(less than)
小于或等于:
选择小于或等于指定版本的IE版本。关键字: lte(less than or equal)
非指定版本:
选择除指定版本外的所有IE版本。关键字: !
<version>

目前的常用IE版本为6.0及以上,推荐酌情忽略低版本,把精力花在为使用高级浏览器的用户提供更好的体验上

IE10及以上版本已将条件注释特性移除,使用时需注意。

说明:

用于选择IE浏览器及IE的不同版本
  • if条件Hack是HTML级别的(包含但不仅是CSS的Hack,可以选择任何HTML代码块)
  • 如不想在非IE中看到某区域,可这样写:

    <!--[if IE]>
    <p>你在非IE中将看不到我的身影</p>
    <![endif]-->

    上述p代码块,将只在IE中可见。

  • if条件6种选择方式的使用示例(下述代码中被条件注释包含的HTML代码块也可以是link标记):
  • 是否,示例代码:

    <!--[if IE]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->


  • 大于,示例代码:

    <!--[if gt IE 6]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->


  • 大于或等于,示例代码:

    <!--[if gte IE 6]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->


  • 小于,示例代码:

    <!--[if lt IE 7]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->


  • 小于或等于,示例代码:

    <!--[if lte IE 7]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->


  • 非指定版本,示例代码:

    <!--[if ! IE 7]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->
  • 示例:
  • <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title>if条件Hack_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
    h1{margin:10px 0;font-size:16px;}
    span{display:none;}
    .not-ie{display:inline;}
    </style>
    <!--[if IE]>
    <style>
    .ie{display:inline;}
    .not-ie{display:none;}
    </style>
    <![endif]-->
    
    <!--[if IE 5]>
    <style>
    .ie5{display:inline;}
    </style>
    <![endif]-->
    
    <!--[if IE 6]>
    <style>
    .ie6{display:inline;}
    </style>
    <![endif]-->
    
    <!--[if IE 7]>
    <style>
    .ie7{display:inline;}
    </style>
    <![endif]-->
    
    <!--[if IE 8]>
    <style>
    .ie8{display:inline;}
    </style>
    <![endif]-->
    
    <!--[if IE 9]>
    <style>
    .ie9{display:inline;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div>
    	您正在使用
    	<span class="not-ie">非IE</span>
    	<span class="ie">IE</span>
    	<span class="ie5">5</span>
    	<span class="ie6">6</span>
    	<span class="ie7">7</span>
    	<span class="ie8">8</span>
    	<span class="ie9">9</span>
    	浏览器
    </div>
    </body>
    </html>
    			


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值