zoukankan      html  css  js  c++  java
  • CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳(转)

    网上有很多关于IE6/7/8, Firefox, Safari, Chrome, Opera CSS Hack的文章,但我觉得太过繁杂,要不给出一张看也看不懂的CSS Hack归纳表,要不就是给出一大堆代码说明问题,不便于学习与使用。我根据自己的使用情况来简单地归纳了一下IE6/7/8, Firefox, Safari, Chrome, Opera的CSS Hack使用方法,希望会对大家有用。

    CSS Hack1:把IE6/7/8与其它浏览器区别开来

    在css代码属性值后面加上“9”(不包括双引号),如:

    123#div {margin-top: 15px9;}

    *这样“margin-top: 15px”属性只有IE6/7/8浏览器能读出来。

    CSS Hack2:针对IE6和IE7

    在css代码的属性名称前加“*”(不包括双引号),如:

    123#div {*margin-left: 15px;}

    *这样“margin-left: 15px”属性只有IE6/7浏览器能读出来。

    CSS Hack3:单独针对IE6

    在css代码的属性名称前加“_”(不包括双引号),如:

    123#div {_ 15px;}

    *这样“ 15px”属性只有IE6浏览器能读出来。

    CSS Hack4:单独针对IE7

    在css代码的属性值后面加“ !important”(不包括双引号),如:

    123#div {height: 18px !important;}

    *这样“height: 18px”属性只有IE7浏览器能读出来。

    CSS Hack5:单独针对IE8

    在css代码的属性值后面加“”(是斜杠加零,不包括双引号),如:

    123#div {background: green;}

    *这样“background: green”属性只有IE8浏览器能读出来。

    CSS Hack6:单独针对Firefox

    把针对Firefox的CSS代码写在下面CSS函数的大括号之间
    @-moz-document url-prefix(){ /*CSS代码*/  },如:

    123@-moz-document url-prefix(){#main {background: red; }}

    *这样id号为“main”的Html元素只有在Firefox中才会显示出“background: red”的效果。

    CSS Hack7:单独针对Opera

    把针对Opera的CSS代码写在下面CSS函数的大括号之间
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ },如:

    123@media alland (-webkit-min-device-pixel-ratio:10000), not alland (-webkit-min-device-pixel-ratio:0){#content {background: url(http://guandian.co/logo.jpg) no-repeatcentertop;} }

    *这样id号为“content”的Html元素只有在Opera中才会显示出“background: url(http://guandian.co/logo.jpg) no-repeat center top”的效果。

    CSS Hack8:针对Safari和Google Chrome

    把针对Safari和Google Chrome的CSS代码写在下面CSS函数的大括号之间
    @media screen and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ },如:

    123@media screenand (-webkit-min-device-pixel-ratio:0){#picture {background: url(http://guandian.co/mypic.gif) no-repeatcentertop;}}

    *这样id号为“picture”的Html元素只有在Safari和Google Chrome中才会显示出“background: url(http://guandian.co/mypic.gif) no-repeat center top”的效果。但是如果Safari和Google Chrome内核版本不一样的话,CSS显示效果也会有所偏差。

    以上是我自己归纳出来的CSS Hack,但是由于本人技术水平有限,还有很多不完整或是不尽合理的地方,请大家提出来,谢谢。

  • 相关阅读:
    页面可视化搭建 整理
    单页面应用(SPA)重新部署后,正在浏览的页面如何更新缓存?
    vim 使用
    浏览器缓存 知识点
    http 2.0 新特性
    GoJS 在 vue 项目中的使用
    详解Vue中watch的高级用法
    什么是 PWA?
    代码风格统一工具:EditorConfig 和 静态代码检查工具:ESLint
    vue-cli 3.x 使用
  • 原文地址:https://www.cnblogs.com/xcsn/p/4831498.html
Copyright © 2011-2022 走看看