zoukankan      html  css  js  c++  java

  • CSS浏览器兼容

    参考资料：CSS Hack Table

    1. 各浏览器各自识别的标签

    特殊标签 IE6 IE7 IE8 Firefox Chrome Safari
    !important . Y . Y . .
    _ Y . . . . .
    * Y Y . . . .
    *+ . Y . . . .
    \9 Y Y Y . . .
    \0 . . Y . . .
    nth-of-type(1) . . . . Y Y

    2. 区别IE和非IE浏览器

    #div
    {
        background:blue;/*非IE背景蓝色*/
        background:red \9;/*IE6、IE7、IE8背景红色*/

    } 

    3. 区别IE6、IE7、IE8、FF、Chrome、Safari

    #div
    {
        background:blue;/*Firefox背景蓝色*/
        background:red \9;/*IE8背景红色*/
        *background:black;/*IE7背景黑色*/    
        _background:orange;/*IE6背景橘色*/    
        /*IE系列浏览器可读[\9]，而IE6和IE7可读[*]，另外IE6可辨识[_]。因此依照顺序写下来，就会让浏览器正确的读取到自己看得懂的CSS语法。*/

    }
    body:nth-of-type(1) p{color:red;}/*Chrome、Safari支持*/ 

    4. 条件注释判断浏览器

    <!--[if !IE]>除IE外都可识别<![endif]-->

    <!--[if IE]>所有的IE可识别<![endif]-->

    <!--[if IE 6]>仅IE6可识别<![endif]-->

    <!--[if lt IE 6]>IE6以下版本可识别<![endif]-->

    <!--[if gte IE 6]>IE6以及IE6以上版本可识别<![endif]-->

    符号 示例 说明
    ! [if !IE] 非IE浏览器
    lt [if lt IE 5.5] IE5.5以下版本
    lte [if lte IE 5.5] IE5.5及其以下版本
    gt [if gt IE 6] IE6以上版本
    gte [if gte IE 6] IE6及其以上版本
    () [if !(IE 7)] 非IE7
    & [if (gt IE 5)&(lt IE 7)] IE5以上，IE7以下版本
    | [if (IE 6)|(IE 7)] IE6或IE7

     

    5. margin加倍的问题

    设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方法是在这个div里面加上display:inline;例如：

    #imfloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下理解为5px*/}

    6. CSS选择符浏览器兼容性索引

    短语

    • yes --- 浏览器支持此选择符
    • no --- 浏览器不支持此选择符
    • part --- 浏览器不能完善的支持此选择符

    浏览器

    • IE6
    • IE7
    • IE7(S) --- IE7 Standards Mode
    • IE7(Q) --- IE7 Quirks Mode
    • IE8
    • IE8(S) --- IE8 Standards Mode
    • IE8(Q) --- IE8 Quirks Mode
    • IE9
    • FF --- Firefox
    • CH --- Chrome
    • OP --- Opera
    • SA --- Safari

    CSS 版本

    • CSS1
    • CSS2
    • CSS3
    CSS选择符浏览器兼容性
    选择符版本IE6IE7IE8IE9FFCHOPSA
    E1 yes yes yes yes yes yes yes yes
    *2 yes yes yes yes yes yes yes yes
    E.classname1 no yes yes yes yes yes yes yes
    E#idname1 yes yes yes yes yes yes yes yes
    E F...1 yes yes yes yes yes yes yes yes
    E > F...2 no yes yes yes yes yes yes yes
    E + F2 no yes yes yes yes yes yes yes
    E ~ F3 no yes yes yes yes yes yes yes
    E[att]2 no yes yes yes yes yes yes yes
    E[att=val]2 no yes yes yes yes yes yes yes
    E[att~=val]2 no yes yes yes yes yes yes yes
    E[att|=val]2 no yes yes yes yes yes yes yes
    E[att^=val]3 no yes yes yes yes yes yes yes
    E[att$=val]3 no yes yes yes yes yes yes yes
    E[att*=val]3 no yes yes yes yes yes yes yes
    E::first-line1 yes yes yes yes yes yes yes yes
    E::first-letter1 yes yes yes yes yes yes yes yes
    E::before2 no no part（Quirks Mode版本不支持此伪元素） yes yes yes yes yes
    E::after2 no no part（Quirks Mode版本不支持此伪元素） yes yes yes yes yes
    E::selection3 no no no yes yes yes yes yes
    E:link1 yes yes yes yes yes yes yes yes
    E:visited1 yes yes yes yes yes yes yes yes
    E:hover2 part（不支持A元素以外的其他元素的:hover伪类） part（不支持A元素以外的其他元素的:hover伪类） part（Quirks Mode版本不支持A元素以外的其他元素的:hover伪类） yes yes yes yes yes
    E:active1 part（不支持A元素以外的其他元素的:active伪类） part（不支持A元素以外的其他元素的:active伪类） part（Quirks Mode版本不支持A元素以外的其他元素的:active伪类） yes yes yes yes yes
    E:focus2 no no part（Quirks Mode版本不支持A元素以外的其他元素的:focus伪类） yes yes yes yes yes
    E:first-child2 no part（Quirks Mode版本不支持:first-child伪类） part（Quirks Mode版本不支持:first-child伪类） yes yes yes yes yes
    E:lang2 no yes yes yes yes yes yes yes

    7. IE6/7下实现inline-block

    display:inline可以让元素以行内元素的形式显示，但是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，在ie6，7中inline元素是无法设置上下padding的，但是在标准浏览器里面是可以设置上下padding的）。鉴于inline元素的这种特性，如果我们想让元素在一行显示，而且可以设置高度，宽度以及上下margin，上下padding等属性，可以使用display:inline-block。不过在ie6，ie7不识别display:inline-block属性，这里涉及了ie6，7中的haslayout属性。ie6，7中的inline元素有个特殊的情况，就是触发了ie的haslayout属性以后就拥有了layout。此时inline元素表现和标准浏览器里面的inline-block元素基本相同。用ie的私有属性zoom来触发haslayout。

    span {200px;height:50px;margin:10px;padding:20px;background:#ccc;zoom:1;}

    上面这段代码在ie6，7中span已经表现得和一个display:inline-block元素一模一样了，但在标准浏览器中span仍然是行内元素，所以需要修改成下面的代码：

    span {200px;height:50px;margin:10px;padding:20px;background:#ccc;zoom:1;display:inline-block;*display:inline;}

    让标准浏览器识别display:inline-block；让ie6，7识别display:inline;然后通过zoom:1来触发haslayout让inline元素在ie中表现和inline-block元素一样。

    8. 不同浏览器中，很多标签的默认样式不同，利用CSS reset文件进行样式清除，然后根据需要进行设置

    html{font-family:"微软雅黑",Arial,sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p,th,td{padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
a{text-decoration:none;color:#000;outline:none}
li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}

    9. 添加<!DOCTYPE HTML>文档类型的声明

    　　IE6浏览器，当我们没有书写这个文档声明的时候，会触发IE6浏览器的怪异解析现象。

    10. IE6、IE7设置的文字高度超出盒模型内容区域设置的高度时会影响布局

    　　给超出高度的标签设置overflow:hidden；或者将文字的行高line-height设置为小于块的高度。

    11. 使用一个空的div设置clear:both;清除浮动，在大部分浏览器中没有问题，但在IE6中div即使是空，也会有默认行高

    　　设置其高度为0，并设置overflow:hidden。｛height:0;overflow:hidden;clear:both;｝

    12. IE6未声明文档类型<!DOCTYPE HTML>的情况下，两个div层float后中间出现3px的空隙，这是IE6的一个bug。

    　　解决方法：在第一个div里加入margin-right:-3px;

    13. 在chrome、IE8、Firefox中，有两个嵌套关系的div，如果外层div的padding值为0，那么内层div的margin-top或margin-bottom的值会“转移”给外层div。

    　　解决方法：

    　　（1）外层div加上overflow:hidden;

    　　（2）把margin-top改成padding-top；

    　　（3）使外层div的padding不为0或宽度不为0且style不为none的border；

    　　（4）让外层div生成一个block formating context，以下属性可以实现：

    　　　　* float:left/right

    　　　　* position:absolute

    　　　　* display:inline-block/table-cell

    　　　　* overflow:hidden/auto

    14. IE6不支持min-width、min-height、max-height、max-width这两个属性的解决方法

     expression(this.width > 300 && this.width / 300 >= this.height / 100 ? "300px" : true);    
height: expression(this.height > 100 && this.width / 300 < this.height / 100 ? "100px" : true);

    15.按钮圆角兼容

    ie6,7,8不支持border-radius属性

    方案一：使用ie-css3.htc

    .box
{
    -moz-border-radius: 15px; /* Firefox */
    -webkit-border-radius: 15px; /* Safari and Chrome */
    border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
    -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
    -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
    box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
    behavior: url(ie-css3.htc);/*需要使用绝对路径*/
}

    缺点：存在一些bug

    方案二：使用多背景

    上面这个圆角按钮，可以先截取按钮的左右两侧的图片。

                  

    然后使用多背景实现宽度可变的圆角按钮。

    btn-style{
display: inline-block; padding: 8px 15px; color: #efefef; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/btnleft.png', sizingMethod='crop') \9; background: url(../images/btnright.png) right center no-repeat \9; background-color: #F0AD4E;
}

    缺点：按钮的高度固定
  • 相关阅读:
    范德蒙矩阵相关
    bat运行exe程序
    github 用token远程连接(三)
    为什么将样本方差除以N1?
    Git commit格式 详解（二）
    C++中this与*this的区别
    函数末尾加入const的作用
    git 使用小补充(四)
    人工智能 机器学习
    机器学习分类
  • 原文地址：https://www.cnblogs.com/sydeveloper/p/3035148.html
Copyright © 2011-2022 走看看