zoukankan      html  css  js  c++  java
  • CSS Hacker

    一、各种浏览器css hacker
          当前市面上的浏览器特别多,而对于前端设计来说,要满足所有的浏览器,兼容处理是非常的伤脑筋,特别的痛苦。
          下面是从网络上整理过来的hacker方法:

    #yourId / yourClass{/* normal */}
    * html #yourId / yourClass{/* IE6 and below */}
    *+html #yourId / yourClass{/* IE7 only */}
    @media all and (min-0px) {
       
    #yourId / yourClass{/* opera */}
    }

          用法:直接写css,用firefox作为第一浏览器看效果,然后IE6下不一样,就用* html重写那个ID容器或者类;如果IE 7不一样,就用*+html重写,如果opera下面不一样,就用@media那个,当然这些重写的需要放在原来的后面。呵呵,就这么简单。这个方法用了之后可能会上瘾,可是会有诸如增加css文件容量等不爽,甚至有时候还会出现直接用这个写几段不同的。所以还是建议能熟悉了解个浏览器具体是在什么属性上支持不一样(例如border宽度IE6认为是不能算在width里面的,但是firefox是认为算width一起的),先尽力写几个浏览器通用的css,不到必不得已不用这个hack方法。
          原理:firefox认为是css语法错误,所以忽略。但是不同IE版本识别不同,不忽略,所以能实现hack,并且*+html还能通过w3c验证,呵呵,爽吧。opera那个就不多说了,也是类似原理,但是看起来比较崩溃,要说明的是,firefox下没问题的话,opera基本也没什么问题的,所以不太会用到这个hack。
          需要注意的是:*+html 对IE7的HACK 必须保证HTML顶部有如下声明,”<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd“>”
          因此这种方法也不是十分的完美。
          另外就是 !important 这个方法了(firefox遇到这个优先级就最高,但是IE6不认,所以下面重新定义可以覆盖),不过这个貌似是以前甚至现在都很多人在用的,但是我个人感觉不是很爽,不能像上面的那样明确的搞定某个浏览器。比如现在IE7对规范css支持已经比IE6好了不知道多少,但是还是会有和firefox有的差异,所以用important的方式,控制起来并不像上面的那么一目了然。
          收集的最全hacker

    #demo{
       
    color:red;/*All*/
       
    color:red\9;/*All IE*/
       
    color:red\0;/*IE8 only*/
       
    +color:blue;/*IE6, IE7 还能用 * 或者 # */
       _color
    :green;/*IE 6*/
       
    [;background-color:green;]/*safari, chrome*/
    }

    * html #demo{/*IE 6 and below*/}

    *+html #demo{/*IE 7, IE 8 beta*/}

    @media all and (min-0px){
       
    #demo{/*Opera*/}
    }

    /*\*//*/
    #demo { /*IE 8 beta*/}
    /**/

    @media screen and (-webkit-min-device-pixel-ratio:0) {
       
    #demo{ /* 针对Chrome、Safari 3.0、Opera 9 的CSS样式 */ }
    }

    body
    :nth-of-type(1)#demo{/*Chrome &amp; Safari 3.1*/}

    .className, x:-moz-any-link {/*FireFox 2 */}

    .className, x:-moz-any-link, x:default{/*FireFox 3*/}

    html
    >/**/body .foo, x:-moz-any-link, x:default{/* Only FireFox 3 */}

  • 相关阅读:
    Spring Boot (20) 拦截器
    Spring Boot (19) servlet、filter、listener
    Spring Boot (18) @Async异步
    Spring Boot (17) 发送邮件
    Spring Boot (16) logback和access日志
    Spring Boot (15) pom.xml设置
    Spring Boot (14) 数据源配置原理
    Spring Boot (13) druid监控
    Spring boot (12) tomcat jdbc连接池
    Spring Boot (11) mybatis 关联映射
  • 原文地址:https://www.cnblogs.com/lfire/p/2653907.html
Copyright © 2011-2022 走看看