• 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;
    }

    缺点:按钮的高度固定

  • 相关阅读:
    C# 导入Excel遇到数字字母混合列数据丢失解决
    C# 导出 Excel
    DataGridView 改变行列颜色
    EditPlus使用技巧
    jquery的事件与应用
    jquery操作DOM元素的复习
    jquery笔记
    jquery 和ajax
    jQuery笔记
    CSS相关知识三
  • 原文地址:https://www.cnblogs.com/sydeveloper/p/3035148.html
Copyright © 2020-2023  润新知