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 */}

  • 相关阅读:
    常用操作
    vue cropper
    Tensorflow学习笔记5: Object_detection之训练PASCAL VOC数据集
    Tensorflow学习笔记4: Object_detection之准备数据生成TFRecord
    Tensorflow学习笔记3: Object_detection之配置Training Pipeline
    Tensorflow学习笔记2: Object_detection之liunx服务器安装部署步骤记录
    OpenCV-python学习笔记1:CV2和PIL按box信息实现图像裁剪
    Tensorflow学习笔记1:Object_detection之模型训练日志结果解析
    python-OS.path.join()路径拼接
    python-几种快速了解函数及模块功能的方式
  • 原文地址:https://www.cnblogs.com/lfire/p/2653907.html
Copyright © 2011-2022 走看看