• 如何让CSS区别IE版本


    关于IE浏览器实在太坑爹了,但你又不得不去解决它,不过就本人所知,IE8—IE10差别不大,至少本人还没有遇到过在IE8环境下到了IE9及以上版本就出现坑爹的问题,但我们又不得不面对IE8以下的版本,说实话,我也不想去处理IE所谓的Bug,但又不得不去处理。谁叫我们都是干苦逼的职业的!

    一、CSS规则(IE CSS hacks)

    其实也只是在样式里说明一下只有IE识别的CSS规则。比如,在CSS属性前置一个”*”区分IE7和低版本,而前置一个”_”则区分IE7及低版本。但是这个方法最好别用(不是我不推荐),因为这个CSS规则还不能被W3C CSS识别(这就是坑爹之处)。

    • * IE8 及 低版本: 在CSS属性后置”9″, 如 height:100%9;
    • * IE7 及 低版本: 在CSS属性前置”*”, 如 *height:100%;
    • * IE6 及 低版本: 在CSS属性前置”_”, 如 _height:100%;
    1 .joks {
    2     background: gray; /* standard */
    3  
    4     background: pink9; /* IE 8 and below */
    5  
    6     *background: green; /* IE 7 and below */
    7  
    8     _background: blue; /* IE 6 */
    9 }

    二、给HTML加个if条件判断

    这办法其实是Paul Irish大神发明的。它实现的办法是通过IE条件判断来给HTML设置不同的className,然后在CSS中通过给不同的className下的后代设置不同的样式即可实现。这个办法比较可行,W3C能识别。

    1 <!--[if lt IE 7 ]> 
    2 <html class="ie6"> < ![endif]-->
    3 <!--[if IE 7 ]> </html>
    4 <html class="ie7"> < ![endif]-->
    5 <!--[if IE 8 ]>
    6  </html>
    7 <html class="ie8"> < ![endif]-->
    8 <!--[if IE 9 ]> 
    9 </html>

    三、用IE条件判断语句

    其实说白了,这个方法大家都在用,而且用的人还挺多的,没办法,至少大牛们是不会这么干的(别急,大牛的方法我会讲的。)

    IE条件判断语句也许是用的最多的区分IE版本(IE6, IE7, IE8)的办法了(我刚刚已经说了,IE8以上的版本差别不大)。看看下面用来区分IE不同版本的代码:

    • <!--[if IE 8]> = IE8版本
    • <!--[if lt IE 8]> = IE7版本以低版本
    • <!--[if gte IE 8]> = IE8版本及高版本
    1 <!--[if IE 8]>
    2 <style type="text/css">
    3     /* css for IE 8 */
    4 </style>
    5 < ![endif]-->
    6  
    7 <!--[if lt IE 8]>
    8     <link href="ie7.css" rel="stylesheet" type="text/css" />
    9 < ![endif]-->

    四、自我感觉方法(大牛靠感觉来做)

    这个方法我可不推荐,但是如果你了解每个版本的Bug的话,那你到可以试试,当然了,IE6和IE7再到IE8识别的间距有所不同,但当你设计版面的时候,我个人推荐你可以试试把间距扩大到20px以上,这样才不会出现IE间距的Bug,当然了,其它的Bug方式还有许多,这里我就不一一介绍了!至少我想说,避免Bug是不可能的,规则是死的,但方法是活的,靠的是想像力而已。

  • 相关阅读:
    LINQ/EF/Lambda 比较字符串日期时间大小
    WinForm RDLC SubReport Step by step
    centos7安装7-zip
    centos修改命令提示符颜色
    更换官方zabbix.repo为阿里云镜像
    利用shell脚本清理nginx日志
    docker
    centos 建立静态 IP 与 IP 地址丢失的解决办法
    构建lnmp高可用架构
    keepalived高可用
  • 原文地址:https://www.cnblogs.com/yuanusihif/p/3222037.html
Copyright © 2020-2023  润新知