zoukankan      html  css  js  c++  java
  • Google Chrome的CSS hack写法

    Google自从2010年9月3日推出了浏览器Google Chrome,写前端效果的同志们又得辛苦了,现在就是个浏览器混乱的时代,自从Google混进来之后,就更混乱了。

    不过还好Google用的是与Safari一样的Webkit引擎,我们可以使用对Safari相似的方法解决css hack,写法是这样子的:

    @medias creen and(-webkit-min-device-pixel-ratio:0){ 
     /*针对GoogleChrome、Safari3.0、Opera9的CSS样式*/  }


    示例:

    @media screen and (-webkit-min-device-pixel-ratio:0) { .font1 {color:#f00} .border1 {border:1px solid #f00;} .bg3 {background:#f00;} } 


    另外有一种通过加#的css hack对chrome没有效果。
    还有以下的css hack 语句目前只有Google Chrome他Safari3.1可以正常解释。

    body:nth-of-type(1) p {color: #333333;}

    关于这个hack起作用的解释如下:

    每个网页只有一个body元素
    body:nth-of-type(1)将匹配页面内第一个也是唯一的一个body元素
    只有Safari 3.1和google chrome支持:nth-of-type伪类


    除此之外,还有专门针对某个浏览器的CSS hack方法,如针对Webkit核心浏览器和Opera的写法:

     /*Webkit and Opera*/ @media all and (min-0px){ .font1 {color:red;} 


    针对Opera浏览器的写法:

     /*Opera*/ @media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) { .font1 {color:red;} 


     针对Firefox浏览器的写法:

     /*Firefox*/ @-moz-document url-prefix() { .font1 {color:red} } 

  • 相关阅读:
    关于JDK 安装,以及Java环境的设置
    DHCP snooping
    解除破解正版Kindle电子书籍的版权限制
    广东地区电信官方DNS服务器
    Bash脚本15分钟进阶指导
    视听说英语
    华中师大2013新生群
    【强网杯2018】Gamebox
    【强网杯2018】逆向hide
    【Wechall.net挑战】Anderson Application Auditing
  • 原文地址:https://www.cnblogs.com/zhenzhong/p/3450712.html
Copyright © 2011-2022 走看看