zoukankan      html  css  js  c++  java
  • 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明

    自从安装了IE8.0正式版本!木头 就对基本的几个 CSS 
    HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助!

    本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象

    HACK原理:不同浏览器对各中字符的识别不同 
    (读完文章你会发现,FF和IE8对以下字符的识别能力完全相同)

    在 
    CSS中常用特殊字符识别表:

    (1)* : IE6+IE7 都能识别*,而标准浏览器FF+IE8是不能识别*的;

    (2)!important : 
    除IE6不能识别 !important外, FF+IE8+IE7 都能识别!important 
    ;

    (3)_ : 除IE6 支持_ 外, FF+IE8+IE7都不支持_;

    (4)9 :所有IE 浏览器都识别(IE6、IE7、IE8、IE9)

    示例:

    (1)区别FF(IE8)与IE6 
    IE7

    backgorund:orange; FF和IE8背景色将为橘黄色

    *backgorund:red; IE6和IE7背景色将为红色

    (2)区别FF(IE8)与IE6与IE7

    background:orange; FF和IE8背景色将为橘黄色

    *background:red 
    !important; IE7背景色将为红色

    *background:blue; IE6背景色将为蓝色

    (3)区别FF(IE8)与IE6与IE7

    background:orange; FF和IE8背景色将为橘黄色

    *background:red; IE7背景色将为红色

    _background:blue; IE6背景色将为蓝色

    (4)区别FF与IE6 
    IE7 E8

    color:gray;  
    FF等非IE浏览器字体色将为灰色

    color:red9;  
    IE8 IE9字体色将为红色

    *color:green;  
    IE7字体色将为绿色

    _color:blue;  
    IE6字体色将为蓝色

    提示:CSS 
    HACK书写顺序:先写FF等非IE浏览器所需样式,其次写IE8所需样式,接着是IE7的,再接着才是IE6的!

    总结:实际运用中我感觉比较少用到!important 
    ,只要你记住"*"和"_"我想就足够区别于FF(IE8)与IE6与IE7了.

    ==========================================================

    1、Css if hack条件语法 
    < !--[if IE]> 
    Only IE <![endif]--> 
    仅所有的WIN系统自带IE可识别
    < !--[if IE 5.0]> Only IE 5.0 
    <![endif]--> 
    只有IE5.0可以识别

    !--[if gt IE 5.0]> Only IE 5.0+ 
    <![endif]--> 
    IE5.0包换IE5.5都可以识别
    < !--[if lt IE 6]> Only IE 6- 
    <![endif]--> 
    仅IE6可识别
    < !--[if 
    gte IE 6]> Only IE 6/+ <![endif]--> 
    IE6以及IE6以下的IE5.x都可识别

    <!--[if lte IE 7]> Only IE 7/- 
    <![endif]--> 
    仅IE7可识别
    < !--[if 
    gte IE 7]> Only IE 7/+ 
    <![endif]--> 
    IE7以及IE7以下的IE6、IE5.x都可识别

    <!--[if IE 8]> Only IE 8/- 
    <![endif]--> 
    仅IE8可识别

    <!--[if IE 9]> Only IE 9/- 
    <![endif]--> 
    仅IE9可识别

     :在 if  后加 lt gte有不同效果 (参加其它参数同理)

    <!–[if IE 8]> = IE8 仅IE8可识别 
    <!–[if lt IE 8]> = IE7或更低版本

    <!–[if gte IE 8]> = 高于或者等于IE8版本

    2、DIV+CSS实例 
    CSS实例一:
    让IE6-IE8显示不同的内容,DIV CSS代码如下:

    <!DOCTYPE 
    html>
    <html>
    <head>
    <meta http-equiv="Content-Type" 
    content="text/html; charset=utf-8" />
    <title>DIV 
    IF条件实例</title>
    </head>
    <body>
    你正在使用:
    <!--[if IE 
    7]> 
    <h2>IE7</h2>
    <![endif]-->
    <!--[if IE 
    6]> 
    <h2>IE6</h2>
    <![endif]-->
    <!--[if IE 
    8]> 
    <h2>IE8</h2>
    <![endif]-->

    <!--[if IE 9]> 

    <h2>IE9</h2>
    <![endif]-->
    <br><br>
    <strong>说明</strong>:如果你的浏览器版本为多少即会显示IE多少,针对IE6-IE9实验</body>
    </html>

    说明:以上针对不同IE显示不同网页内容DIV+CSS实例实验。

    DIV+CSS实例二 :
    让IE6-IE8显示不同CSS样式效果,DIV CSS代码如下:

    <!DOCTYPE 
    html>
    <html>
    <head>
    <meta http-equiv="Content-Type" 
    content="text/html; charset=utf-8" />
    <title>CSS 
    IF条件hack实例</title>
    <!--[if IE 6]> 
    <style 
    type="text/css">
    .divcss{ 
    color:#F00;}
    </style>
    <![endif]-->
    <!--[if IE 7]> 

    <style type="text/css">
    .divcss{ 
    color:#FF0;}
    </style>
    <![endif]-->
    <!--[if IE 8]> 

    <style type="text/css">
    .divcss{ 
    color:#00F;}
    </style>
    <![endif]-->

    <!--[if IE 9]> 
    <style 
    type="text/css">
    .divcss{ 
    color:#000;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div 
    class="divcss">
    DIV 
    CSS实验提示:<br>
    我在IE6下是红颜色,在IE7下是黄颜色,在IE8下是蓝颜色,在IE9下是黑色
    </div>
    </body>
    </html>

  • 相关阅读:
    Map与实体之间转换
    letsencrypt 免费SSL证书申请, 自动更新
    spring接收json格式的多个对象参数(变通法)
    controller函数中参数列表使用多个@RequestBody
    经典网页设计:30个新鲜出炉的扁平化网站设计《上篇》
    使用 iosOverlay.js 创建 iOS 风格的提示和通知
    字体大宝库:设计师必备的优秀免费英文字体
    RandomUser – 生成随机用户 JSON 数据的 API
    Salvattore:CSS 驱动的 jQuery Masonry 插件
    赞!jsPDF – 基于 HTML5 的强大 PDF 生成工具
  • 原文地址:https://www.cnblogs.com/Gbeniot/p/3829500.html
Copyright © 2011-2022 走看看