zoukankan      html  css  js  c++  java
  • 如何根据不同的浏览器写不同的css样式达到兼容

     做前端静态页面的时候总是发现,ie的兼容性很差,总会出点问题。然后就去改代码 ,改完以后 又发现 火狐 谷歌又挂了,这可咋整。
        后来发现做个判断吧 哪里有问题哪里就做个判断呗 ,咋判断呢,这么判断。
     
     <!--[if lte IE 6]>
    <![endif]-->
    IE6及其以下版本可见,就是ie5,ie4.。。的话 就调用这个css。

    <!--[if lte IE 7]>
    <![endif]-->
    同道理了。。同上

    <!--[if IE 6]>
    <![endif]-->
    同道理了。。同上

    <![if !IE]>
    <![endif]>
    同道理了。。同上

    <!--[if lt IE 8]>
    <![endif]-->
    IE8以下的版本可见


    <!--[if gte IE 7]>
    <![endif]-->
    同道理了。。同上

    这么判断就行,你可以没事试试
     <!––[if IE]>
           <h1>您正在使用IE浏览器</h1>
           <!––[if IE 5]>
               <h2>版本 5</h2>
           <![endif]––>
           <!––[if IE 5.0]>
               <h2>版本 5.0</h2>
           <![endif]––>
           <!––[if IE 5.5]>
               <h2>版本 5.5</h2>
           <![endif]––>
           <!––[if IE 6]>
               <h2>版本 6</h2>
           <![endif]––>
           <!––[if IE 7]>
               <h2>版本 7</h2>
           <![endif]––>
    <![endif]––>
    那如果当前的浏览器是IE,但版本比IE5还低,该怎么办呢,可以使用<!–[if ls IE 5]>,当然,根据条件注释只能在IE5+的环境之下,所以<!–[if ls IE 5]>根本不会被执行。
    lte:就是Less than or equal to的简写,也就是小于或等于的意思。
    lt :就是Less than的简写,也就是小于的意思。
    gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
    gt :就是Greater than的简写,也就是大于的意思。
    ! : 就是不等于的意思,跟javascript里的不等于判断符相同


    (2)
    来,看个我写过的东东。
    <!–- 默认先调用css.css样式表 –->

    <link rel="stylesheet" type="text/css" href="css.css" />
    <!-–[if IE 7]>

    <!–- 如果IE浏览器版是7,调用ie7.css样式表- –>

    <link rel="stylesheet" type="text/css" href="ie7.css" />
    <![endif]–->

    <!–-[if lte IE 6]>

    <!–- 如果IE浏览器版本小于等于6,调用ie.css样式表 -–>

    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]–>

      其他浏览器的话 都好调了 自己调呗。。试试看
        

     

  • 相关阅读:
    Power of Cryptography
    Radar Installation
    Emag eht htiw Em Pleh
    Help Me with the Game
    89. Gray Code
    87. Scramble String
    86. Partition List
    85. Maximal Rectangle
    84. Largest Rectangle in Histogram
    82. Remove Duplicates from Sorted List II
  • 原文地址:https://www.cnblogs.com/HoverM/p/4812181.html
Copyright © 2011-2022 走看看