Rainshadow StudioRainshadow StudioRainshadow StudioRainshadow Studio
  • Home
  • Photography
  • Design
  • Techniques
    • Photography Techniques
    • Design Techniques
  • Others

IE6/7/8/9 Firefox的CSS兼容问题

    Home 设计工作站 设计技巧 IE6/7/8/9 Firefox的CSS兼容问题
    NextPrevious

    IE6/7/8/9 Firefox的CSS兼容问题

    By rainshadow | 设计技巧 | 1 comment | 8 5月, 2012 | 0

    这是关于IE的一系列兼容问题的解决方法。

    1.  不同浏览器版本代码区分

      “9” 可以区别所有IE和FireFox.

      “*” IE6、IE7可以识别.IE8、FireFox不能.

      “_” IE6可以识别,IE7、IE8、FireFox不能.

      如此,就可以完全区分开IE6、IE7、IE8、FireFox了.

      例如:

      .color{
        background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
        background-color: #FF00009; /*IE6、IE7、IE8会显示红色*/
        *background-color: #0066FF; /*IE6、IE7会变为蓝色*/
        _background-color: #009933; /*IE6会变为绿色*/
      }

      再增加一点区分

      “:root” IE9可以识别,其他浏览器不能.

      “:last-child” IE9和firefox可以识别,IE6、7、8不行。

      另外!important,也可以用来区分IE6和其他浏览器。!important能提高css的权限,IE6不认识这个标识。但是并不是说IE6就不认识!important前面的css了。所以用!important的时候必须同样的语句写2句,不然岂不是没有东西是低权限了么。

      比如不能写成下面的样子:

      .color{
        background-color: #CC00FF !important; /*光这么写,虽然非IE6都提高了权限,但是IE6还是能显示#CC00FF*/
      }

      要写成

      .color{
        background-color: #CC00FF !important; /*非IE6都提高这句的权限*/
        background-color: #000000;/*这句再后面,对IE6来说2句权限一样,所以用#000000代替#CC00FF*/
      }
    2. IE6左边距2倍的问题,只要在代码中增加display: inline;

      #box {
        float: left;
        margin-left: 100px;
        display: inline;/*主要是这句*/
      }
    3. IE下判断IE版本的语句

      如上面的例子,用if语句就能在不同IE版本浏览器下调运对应的css文件。

      lte:就是Less than or equal to的简写,也就是小于或等于的意思。
      lt :就是Less than的简写,也就是小于的意思。
      gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
      gt :就是Greater than的简写,也就是大于的意思。
      ! : 就是不等于的意思,跟javascript里的不等于判断符相同

      注意:默认的CSS样式应该位于HTML文档的首行,进行条件注释判断的所有内容必须位于该默认样式之后。

    code ,html ,设计

    rainshadow

    More posts by rainshadow

    Related Post

    • 如何将页脚固定在页面底部

      By rainshadow | 0 comment

      作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当Read more

    • Adobe Edge Reflow CC 响应式网页设计

      By rainshadow | 0 comment

      响应式网页设计基础【从零开始】 如今的互联网事业突飞猛进,可谓一日千里Read more

    • 做站必备神图

      By rainshadow | 0 comment

    • 手机网站开发原则

      By rainshadow | 0 comment

      从09年初接手淘宝手机网站前端开发的工作至今,转眼已是一年。一步步看着Read more

    • WAP页面设计与实现小贴士

      By rainshadow | 0 comment

      目前绝大多数手机都支持WAP 2.0。WAP 2.0的页面设计具有更好Read more

    1 comment

    • Crasty 回复 2009年10月17日 at 上午6:10

      Interesting and informative. But will you write about this one more?

    Leave a Comment

    取消回复

    您的电子邮箱地址不会被公开。 必填项已用*标注

    NextPrevious

    标签

    Adobe ai app apple BBC CIVIC code css dreamweaver excel Flash Google Gphone HD html ipad jequery js office ppt Premiere PS PS3 TV UI wordpress 上海 吃吃喝喝 奥运 婚礼 小常识 幽默 手机 报价 摄影 摄影技巧 汽车 流行 电影 电脑 网站 视频 设计 软件 音乐
    Copyright 2017 Rainshadow Studio | All Rights Reserved
    • Home
    • Photography
    • Design
    • Techniques
      • Photography Techniques
      • Design Techniques
    • Others
    Rainshadow Studio