zoukankan      html  css  js  c++  java
  • 三种解决IE版本兼容性问题


    1:条件级别
    语法 :<!--[if IE]> 执行内容 包括css和html<![endif]-->
    ------放到css中:---------
    <!--[if IE]>
    <style>
    p{color:color} // 如果是ie浏览器 颜色是红的
    </style>
    <![endif]-->

    ------放到html中:---------
    <!--[if IE]>
    <p>如果是IE流浪器则执行该代码的<p>
    <![endif]-->

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

    有六种取值空间
    是否 ‘空’、大于 ‘gt’、大于等于 ‘gte’、小于 ‘lt’、小于等于 ‘lte’、非指定版本 ‘!’


    <!--[if gt IE 6]>
    <style>
    p{color:color} // 如果ie浏览器 大于IE6 时 颜色是红的
    </style>
    <![endif]-->

    <!--[if gte IE 6]>
    <style>
    p{color:blue} // 如果ie浏览器 大于等于IE6 时 颜色是蓝色的
    </style>
    <![endif]-->

    2:属性级别
    语法:
    selector{<hack>?property:value<hack>?;}

    取值区间:
    _ 下划线:属性前面加下划线_ 适应 IE6 以及IE6 以下版本(-连接线 中划线也可以,但是为了避免与属性混淆 建议使用下划线_)
    * 星号:属性前面加星号*, 适用于IE7 及以下版本
    9 :IE6 及以上版本
    :IE8 及以上和Opera15以下的浏览器

    <style>
    .test1{
    _color:red;
    }
    .test2{
    *color:green;
    }
    .test3{
    color:blue9;
    }
    </style>
    <body>
    <!--[if IE]>
    <div>是IE浏览器<div>
    <![endif]-->
    <p>非IE浏览器</p>
    <div class="test1">我是IE6 及以下的版本 颜色是红的</div>
    <div class="test2">我是IE7 及以下的版本 颜色是green的</div>
    <div class="test3">我是IE6 及以上的版本 颜色是blue的</div>
    </body>


    3:选择操作符级别
    语法:
    <hack> selector{ sRules }

    选择不同的浏览器及版本
    尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎
    通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。
    一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。
    简单列举几个:
    * html .test { color: #090; } /* For IE6 and earlier */
    * + html .test { color: #ff0; } /* For IE7 */
    .test:lang(zh-cmn-Hans) { color: #f00; } /* For IE8+ and not IE */
    .test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */

  • 相关阅读:
    Android周学习Step By Step(6)Android的数据库SQLite
    Android周学习Step By Step(2)HelloWorld
    解决方案(.sln)文件
    浅谈测试(1)单元测试
    批量上传功能的实现
    分页控件AspNetPager的用法
    .net下验证码的简单实现
    window.alert重写实现友好的对话框(支持IE)
    网页上自定义运行和测试HTML脚本
    数据库行转列的sql语句(zt)
  • 原文地址:https://www.cnblogs.com/wcnwcn/p/8143443.html
Copyright © 2011-2022 走看看