CSS hack用法案例详解

之前一直很狭隘的对CSS hack持有偏见，觉得写得规范的代码不应该使用这些“邪门歪道”，可最近产品发布一个小问题却让我头疼了很久，最后查了一下资料，竟然使用CSS hack轻松解决了，不得不服啊，对付神奇的IE就得使用这些利器。

什么是CSS hack

由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。

常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。

CSS 内部hack

正经的CSS是这么写的

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            .test
            {
                background-color:green;
            }
        </style>
    </head>
    <body>
        <div class="test" style="height:100px; width:100px; line-height:100px; margin:50px; border:1px solid #000;"></div>
    </body>
<html>

这样的代码对于所有当前常用的浏览器都是好使的，结果应该是这样子的

但是在CSS3中常见一些这样的写法

/*Mozilla内核浏览器：firefox3.5+*/
  -moz-transform: rotate | scale | skew | translate ;
 /*Webkit内核浏览器：Safari and Chrome*/
  -webkit-transform: rotate | scale | skew | translate ;
 /*Opera*/
  -o-transform: rotate | scale | skew | translate ;
 /*IE9*/
  -ms-transform: rotate | scale | skew | translate ;
 /*W3C标准*/
  transform: rotate | scale | skew | translate ;

如果没有注释乍一看还以为逆天了，这样的代码都好使！这样的代码确实好使，CSS3目前标准还没有统一，各个浏览器都有自己的表现方式，甚至有的实现，有的未实现，在前面加一些前缀以表示支持某个特定浏览器，这也是CSS 内部hack的基本原理，向上面这些简单易懂，但是真正的CSS hack 远远不止于此，因为有不死的IE6及其各种奇葩的兄弟版本。

CSS 内部hack 语法是这样的 selector{<hack>?property:value<hack>?;} ，上面代码所示的是在属性名称之前的hack，当然还有这样的

*background-color:green;

属性前面加个“*”这样的写法只会对IE6、7生效，其它版本IE及现代浏览器会忽略这条指令（没有特殊说明，本文所有hack都是指在声明了DOCTYPE的文档的效果）

-background-color:green;

属性前面有个“-”这样的只有IE6识别，还有些在后面的hack

background-color:green!important;

这样在属性值后面添加“!important”的写法只有IE6不能识别，其它版本IE及现代浏览器都可以识别，还有“+”、“\0”、”\9” 等，乱七八糟好烦，画个表

这样就清楚多了吧。如果只想给上面的test DIV在IE访问的时候加绿色背景，就可以这么写

background-color:green\9;

如果想IE6红色，IE7绿色，其它黄色（当然没人这么无聊）就可以这么写

background-color:green; +background-color:green; _background-color:green;

选择器hack

选择器hanck主要是针对IE浏览器，其实并不怎么常用，语法是这样的：<hack> selector{ sRules }

:root .test
{
    background-color:green;
}

HTML头部引用

HTML头部引用就比较特殊了，类似于程序语句，只能使用在HTML文件里，而不能在CSS文件中使用，并且只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。

<!– 默认先调用css.css样式表 –>
<link rel="stylesheet" type="text/css" href="css.css" rel="external nofollow"  />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie7.css" rel="external nofollow"  />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie.css" rel="external nofollow"  />
<![endif]–>

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判断符相同。

书写顺序

看看，看看，这么多姿势，那么一个效果，好多种写法，什么顺序写才能保证各个浏览器都得到希望的效果呢？因为CSS只要是同一级别，出现重复属性设置，后出现的会覆盖前面出现的，所以在书写的时候一般把识别能力强的写前面，看个例子

_background-color:red;
background-color:green;

如果希望DIV在IE6上是红色，其它是绿色，上面的写法可不可以呢？试一下发现所有浏览器上都是绿色，因为在IE6解析的时候，第一句能够识别，背景设为红色，但是第二句所有浏览器都识别，IE6也不例外，背景颜色又被设为绿色，所以得反过来写

background-color:green;
_background-color:red;

总结出的规律就是：先一般，再特殊。有兴趣的同学可以试试试试下面CSS，看看和你想的效果是否一样

background-color:blue; /*所有浏览器*/
background-color:red\9;/*所有的ie*/
background-color:yellow\0; /* ie8+*/
+background-color:pink; /*+ ie7*/

到此这篇关于CSS hack用法案例详解的文章就介绍到这了,更多相关CSS hack用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Chrome的hack写法以及CSS的支持程度图示

    Chrome的hack写法以及CSS的支持程度图示

    复制代码 代码如下: body:nth-of-type(1) p{ color: #333333; } Only the Google Chrome and Safari 3.1 browsers will show paragraphs as red.

  • CSS Hack 汇总速查手册浏览器兼容必会

    屏蔽IE浏览器(也就是IE下不显示) 复制代码 代码如下: *:lang(zh) select {font:12px !important;} /*FF 可见,特别声明:由于Opera最新的更新,此句目前已经成为FF的专用HACK*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 复制代码 代码如下: *+html {-} 当面临需要只针对IE7

  • 区分IE6，IE7，firefox的CSS hack

    区别IE6与FF:        background:orange;*background:blue; 区别IE6与IE7:        background:green !important;background:blue; 区别IE7与FF:        background:orange; *background:green; 区别FF,IE7,IE6:        background:orange;*background:green !important;*background

  • css ie6 ie7 ff的CSS hack使用技巧

    FF浏览器 .test{ height:20px; background-color:orange; } IE7浏览器 *+html .test{/*IE7*/ height:20px; background-color:blue; } IE6浏览器 *html .test{/*IE6*/ height:20px; background-color:black; } 通过上面的CSS代码可以看出FF还是最听话的浏览器.在IE6和IE7如果要使用HACK必须要在前面加上夫级标签html. 这里就很

  • CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

    CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

    现在的浏览器IE6-IE10.Firefox.Chrome.Opera.Safari...数量众多,可谓百家争鸣,对用户来说有了很多的可选择型,不过这可就苦了Web前端开发人员了.今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐.Chrome.Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器.如图所示: 下面就来看一下代码吧: html部分: 复制代码 代码如下: <div class="content">

  • CSS Hack 汇总快查

    *:lang(zh) select {font:12px !important;} /*FF的专用*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 *+html {-} 当面临需要只针对IE7做样式的时候就可以采用这个HACK. IE6及IE6以下识别 * html {-} 这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可

  • CSS Hack收集汇总

    屏蔽IE浏览器(也就是IE下不显示) *:lang(zh) select {font:12px !important;} /*FF的专用*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 *+html {-} 当面临需要只针对IE7做样式的时候就可以采用这个HACK. IE6及IE6以下识别 * html {-} 这个地方要特别注意很多地主都写了

  • 指定网页的doctype解决CSS Hacking方法总结

    但是实际上,浏览器远远不止这几个,Firefox分为Firefox 1.5,Firefox 2,Firefox 3几个主要版本,IE7,IE6中也各有好几个系列,另外除开这两个主流厂商的产品之外,还有Opera,Konqueror,Netscape,chrome等一系列. 这些浏览器,各有各的一套,往往在这里运行正常,在那里运行就不正常了.于是WD们拆东边补西边,终于能在几个浏览器下都正常了.结果,产品经理又有了新的需求,需要在哪儿哪儿那儿改一下,于是乎,好不容易糊弄好的的纸架子一下子倒塌了,W

  • CSS hack用法案例详解

    CSS hack用法案例详解

    之前一直很狭隘的对CSS hack持有偏见,觉得写得规范的代码不应该使用这些"邪门歪道",可最近产品发布一个小问题却让我头疼了很久,最后查了一下资料,竟然使用CSS hack轻松解决了,不得不服啊,对付神奇的IE就得使用这些利器. 什么是CSS hack 由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack. 常用的CSS hack 有三种方式,CSS 内部hack.选择器hack.HTM

  • Python中return用法案例详解

    python中return的用法 1.return语句就是把执行结果返回到调用的地方,并把程序的控制权一起返回 程序运行到所遇到的第一个return即返回(退出def块),不会再运行第二个return. 例如: def haha(x,y): if x==y: return x,y print(haha(1,1)) 已改正: 结果:这种return传参会返回元组(1, 1) 2.但是也并不意味着一个函数体中只能有一个return 语句,例如: def test_return(x): if x >

  • Java ConcurrentHashMap用法案例详解

    一.概念 哈希算法(hash algorithm):是一种将任意内容的输入转换成相同长度输出的加密方式,其输出被称为哈希值. 哈希表(hash table):根据设定的哈希函数H(key)和处理冲突方法将一组关键字映象到一个有限的地址区间上,并以关键字在地址区间中的象作为记录在表中的存储位置,这种表称为哈希表或散列,所得存储位置称为哈希地址或散列地址. 二.HashMap与HashTable 1,线程不安全的HashMap 因为多线程环境下,使用HashMap进行put操作会引起死循环,导致CP

  • C++优先队列用法案例详解

    c++优先队列(priority_queue)用法详解 普通的队列是一种先进先出的数据结构,元素在队列尾追加,而从队列头删除. 在优先队列中,元素被赋予优先级.当访问元素时,具有最高优先级的元素最先删除.优先队列具有最高级先出 (first in, largest out)的行为特征. 首先要包含头文件#include<queue>, 他和queue不同的就在于我们可以自定义其中数据的优先级, 让优先级高的排在队列前面,优先出队. 优先队列具有队列的所有特性,包括队列的基本操作,只是在这基础上

  • CSS linear-gradient属性案例详解

    CSS linear-gradient属性案例详解

    目录 一.介绍 二.使用技巧 2.1 方格背景 2.2 棋盘效果 linear-gradient是css3的一个属性,功能强大,但是因为使用的灵活性,让没接触过的人感觉不好下手,下面来一起学习一下: 一.介绍 linear-gradient 是一种实现线性渐变的属性,顾名思义,它的特点的是控制渐变,特点是线性的进行控制. 属性介绍: linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+); 可以简化为: 1.

  • C# Request.Form用法案例详解

    在CS文件中获得对应页面中的下拉框DropDownList_sitebranch值可以有以下几种方法获得: siteInfo.FZJGID = DropDownList_sitebranch.SelectedItem.Value.Trim(); siteInfo.FZJGID = Request.Form["DropDownList_sitebranch"].ToString(); siteInfo.FZJGID = Request["DropDownList_sitebra

  • C++ ostream用法案例详解

    C++ ostream用法案例详解

    概述 在 C++中,ostream表示输出流,英文"output stream"的简称.在 C++中常见的输出流对象就是标准输出流cout,很少自定义ostream的对象,更多的是直接使用cout.那么 ostream 有什么用呢,来看一个场景: class CPoint { public: CPoint(int x_,int y_):x(x_),y(y_){} int x,y; }; 这里定义了一个简单的类CPoint,如果我们实例化该类过后,想要打印对象的值: CPoint poi

  • C# Console.WriteLine()用法案例详解

    C# Console.WriteLine()用法案例详解

    以前用Console.WriteLine()的时候就只会用它直接输出string字符串,但后来发现它还有其它在有些场合下会十分方便的输出方法,这篇就记录一下这些方法的使用吧. 代码格式我就不写了,因为写了也不好理解,所以直接上示例了.  ① static void Main(string[] args) { int i = 6; string s = "输出"; Console.WriteLine("{0}还可以这样{1}哦.", i, s); Console.Wr

  • MFC LoadImage用法案例详解

    目录 函数原型 cxDesired, cyDesired: fuLoad: 示例 1.加载Icon资源 2.加载本地磁盘的Icon文件 3.加载本地磁盘的Bitmap文件 函数原型 HANDLE LoadImage( HINSTANCE hinst, // 若加载程序外部资源传NULL,否则一般传AfxGetInstanceHandle() LPCTSTR lpszName, // 图片名称或全路径 UINT uType, // 图片类型:IMAGE_BITMAP或IMAGE_ICON或IMAG

  • C++ GetDlgItem用法案例详解

    C++ GetDlgItem用法案例详解

    GetDlgItem的用法小结 GetDlgItem用于获得指定控件ID的窗体指针,函数原型如下: HWND GetDlgItem( HWND hDlg, int nIDDlgItem ); CWnd* GetDlgItem(int nID) const; 它的使用说明中有这样一行字,**The returned pointer may be temporary and should not be stored for later use. **,那说明,它返回的指针有可能是有效的,有可能是无效

随机推荐