zoukankan      html  css  js  c++  java
  • 区分ff/ie6/ie7/ie8,解决样式不兼容

    下面的内容都来自网络摘抄,现拿出来分享
    区分ff/ie6/ie7/ie8
    注意下面介绍的这些hack写法仅适用于XHTML1.0。如果没有在HTML最前加上
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    那么效果将不一样!此外,这里所说的IE8,不是指IE8的兼容模式,因为IE8的兼容模式其实就是IE7。
    
    selector{
    property:value; // 所有浏览器
    property:value\9; // 所有IE浏览器
    +property:value; // IE7
    _property:value; // IE6
    }
    
    区别IE6、7与FF/IE8:
    background:blue;*background:orange;
    引用
    显示效果:
    IE 6/7:orange
    FF/IE8:blue
    原理:FF/IE8不支持*开头,而IE6/7都支持。
          *是标准浏览器如FF不支持的,ie8也不支持,但是IE5/6/7能够识别
    
    区别IE6与IE7/IE8/FF:
    background:green;_background:blue;
    引用
    显示效果:
    IE7/8/FF:green
    IE6:blue
    原理:IE6支持下划线"_",IE7、8和firefox均不支持下划线。
          版本小于IE6的IE浏览器能够识别_,但是其他的浏览器,IE7/IE8/FF都不识别_
    
    区别FF/IE8和IE6/7:
    background:orange;+background:green;-background:blue;
    或者
    background:orange;*background:green!important;*background:blue;
    引用
    显示效果:
    IE6:blue
    IE7:green
    FF/IE8:orange
    原理:IE6能识别-,IE7能识别+,IE8和FF都不能识别+和-
          IE8/FF都不识别*,IE7优先识别!important,IE6不能识别!important。
    
    区别FF/IE8/7和IE6:
    body>p{color:#f00};
    引用
    显示效果:
    IE6:无色默认
    IE7/8/FF:#f00
    原理:body>p 支持IE7/8/FF,不支持IE6。
    
    区别IE6和IE7/FF:
    selector{color:red!important;color:green;}
    显示效果:
    IE6:green
    IE7/8/FF:red
    原理:IE6不识别!importent
          IE7识别!importent,并且!importent起到设置优先级的作用
          IE8识别!importent,并且!importent起到设置优先级的作用
          FF识别!importent,并且!importent起到设置优先级的作用
    
    \9      p {color:#f00\9;}          支持 IE6/7/8         不支持FF
    * html  p {color:#f00;}            支持 IE6             不支持FF IE7 IE8b
    *+html  p {color:#f00;}            支持 IE7 IE8b        不支持FF IE6
    
    
    IE都能识别*   标准浏览器(如FF)不能识别*
    IE6能识别*    但不能识别 !important
    IE7能识别*    也能识别!important
    IE8不能识别*  但能识别!important
    FF不能识别*   但能识别!important
    
    关于IE8的hacks:
    某外文网站上的解决方案,摘抄如下:
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    大意是:在 <head>中, <title>和任何 <meta>之前插入这个 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> ,这一行信息就告诉IE8将该页面按照IE7的规则来处理!
    
    .test{
        color:#00f\9; // IE8 only
        color:#00f\9; // 适用于所有IE版本
    }
    
    可同时区分IE8、IE7、IE6、Firefox的CSS hacks:
    .test{
        color:#000; // Firefox
        color:#00f\9; // IE8
        *color:#f00; // IE7
        _color:#0f0; // IE6
    }
    
    书写顺序为FireFox在最前,其次是IE8、IE7,最后是IE6.
    color:red;//所有浏览器
    *color:blue\9;//所有IE
    +color:orange;//IE7
    _color:green;//IE6
    
    若浏览器为FireFox,那么color:red;
    若浏览器为IE8,根据CSS优先性原则,color:blue;
    若为IE7,color:orange;
    若为IE6,则color:green。
    
    对于* - + \9四个标签来说
    IE6识别 * 、_
    IE7识别 * 、+
    IE8识别 \9
    FF什么都不识别 
  • 相关阅读:
    【转】Uiautomator Api浅析
    【转】UiAutomator简要介绍
    后台自动启动appium
    adb通过wifi连接Android设备
    Python字符串处理和输入输出
    OJ题目输出的生成
    Weka的使用和二次开发(朴素贝叶斯及其属性选择)
    PointNet++论文理解和代码分析
    VGG-16复现
    二维偏序-最长上升子序列的两种求解方式
  • 原文地址:https://www.cnblogs.com/winxiang/p/2317164.html
Copyright © 2011-2022 走看看