什么是CSS hack

CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
 
常用的CSS hack 有三种方式,CSS 内部hack、选择器hack、HTML 头部引用,其中第一种最常用。
 
一般我们的内部样式是这样写的:

<style type="text/css" >
.test{
background-color:green;
}
</style>

htm代码:

<div class="test" style="height:100px; width:100px; line-height:100px; margin:50px; border:1px solid #000;"></div>

结果应该是这样的:

在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的基本原理。

目前还有很大部一部分人习惯还是用IE的浏览器,所以这一块市场还是要做的,这就导致了前端的工作量增多了不少。下面说说CSS 内部hack。

CSS 内部hack的语法 是 selector{<hack>?property:value<hack>?;} ,例如:

<style type="text/css" >
.test{
* background-color:green;
}
</style>

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

<style type="text/css" >
.test{
- background-color:green;
}
</style>

在属性前面有个“-”这样的只有IE6识别。

<style type="text/css" >
.test{
_background-color:green;
}
</style>

在属性前面有个“_”这样的只有IE6识别。

<style>
.test{
*+background-color:pink;
}
</style>

在属性前面有个“*+”这样的只有IE6,IE7能识别。

<style type="text/css" >
.test{
background-color:green!important;
}
</style>

在属性值后面添加“!important”的写法只有IE6不能识别,其它版本IE及现代浏览器都可以识别。

还有\9,\0,\9\0。

<style type="text/css" >
.test{
background-color:green\9;
}
</style>

在属性后面加“\9”的,在所有(IE6,IE7,IE8,IE9,IE10)下都可以显示。其他浏览器都不会显示。

<style type="text/css" >
.test{
background-color:green\0;
}
</style>

在属性后面加“\0”的,在所有(IE8,IE9,IE10)下都可以显示。其他浏览器都不会显示。

<style type="text/css" >
.test{
background-color:green\9\0;
}
</style>

在属性后面加“\9\0”的,在IE9,IE10下都可以显示。其他浏览器都不会显示。

以上是css hack 内部样式。

选择器hack

选择器hack最常见的三种情况分别是:*html,*+html,:root。还有其他的,如:

@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

*html是针对IE6显示的。

*+html是针对IE7显示的。

:root是针对IE9显示的。

如果你想针对IE7显示写,你可以像以下这样:

*+html #ie7test { /* IE7 only*/
color:green;
}

如果你想针对IE9显示写,你可以像以下这样写:

:root .test{
background:green;
}

HTML头部引用

这是条件注释法,这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。举例如下:

<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]--> 只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]--> 只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]--> 只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]--> 非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

暂时先写到这里,后续再上。

聊聊css hack的更多相关文章

  1. IE10 CSS Hack(顺便聊聊IE11的CSS Hack)

    一.特性检测:@cc_on 我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:该脚本里面的IE排除条件注释,以确保IE6-9不承认 ...

  2. 聊聊CSS postproccessors

      阿里妈妈 @一丝 准备发布其CSSGrace,即CSS后处理插件,于是顺便聊聊CSS postprocessors. 从Rework说起 Rework是TJ大神开发的CSS预处理框架.但为什么会出 ...

  3. CSS Hack技术介绍及常用的Hack技巧集锦

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  4. CSS Hack

    CSS HACK,网上有很多,主要是IE版本不同造成的,尽量不要用CSS HACK,实在调不过去可以用一用,相信以后随着IE低版本的淘汰,CSS HACK也将不在使用. 类内部HACK IE6识别 - ...

  5. css3复杂选择器+内容生成+Css Hack

    1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...

  6. CSS Hack解决浏览器IE部分属性兼容性问题

    1.Css Hack 不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不 ...

  7. IE9下css hack写法

    ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下: select { background-color:red\0; ...

  8. 【荐】说说CSS Hack 和向后兼容

    人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...

  9. IE 6 ~ 9 CSS Hack 写法总结

    IE 6 ~ 9 CSS Hack 写法总结 24th 四, 14 lip2up [code lang="css"]_color: red;    /* ie6 */*color: ...

随机推荐

  1. windows系统中WIN键的快捷组合

    1.WIN+E    打开我的电脑(计算机) 2.WIN+D      返回桌面 当你在用聊天工具与朋友聊天时,旁边突然出现某位小伙伴,快速按下WIN+D返回到桌面就可以很好的保护你的聊天内容啦! 3 ...

  2. 修改客户端连接的服务器IP地址(内部使用)

    登录系统时如果出现 “验证失败”,或者,无法登陆系统,请修改服务器端IP地址,修改方法如下: 注意: (1)修改服务器端IP地址时,要提前关闭/退出客户端.建议也看看“Windows的任务管理器”中是 ...

  3. codevs1409 拦截导弹2

    [问题描述]一场战争正在 A 国与 B 国之间如火如荼的展开.B 国凭借其强大的经济实力开发出了无数的远程攻击导弹,B 国的领导人希望,通过这些导弹直接毁灭 A 国的指挥部,从而取得战斗的胜利!当然, ...

  4. 单据UI界面设计开发

    1.新建单据界面数据 2.创建数据模型,包括单据.单据行.设置应用缺省特性,每个模型树下只有一个红色项 3.新增动作,系统默认没有弃审支作按钮事件 4. 新增UI Form,选择对应的模型树及表单类别 ...

  5. django部署

    部署教程 阿里云django部署教程 注意备份Apache2的siteconf文件 细节 环境迁移 如果是修改了注意些requirement文件

  6. Java知识积累3-XML的DOM解析修改和删除方法

    import java.io.File; import java.io.IOException; import javax.xml.parsers.DocumentBuilder;import jav ...

  7. CentOS6.5 根目录结构划分

    /bin    系统的执行程序文件/dev    硬件设备的文件目录/home    用户的家目录/lib    系统库文件目录/mnt    挂载目录,外设的挂载/media    经常用于媒体文件 ...

  8. XMLHttpRequest.status状态码

    XMLHttpRequest.status状态码1xx-信息提示 这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个1xx响应. 100-继续. 101-切换协议. 2xx-成 ...

  9. vscode 与 python 的约会

    安装python 官网(https://www.python.org/downloads/)下载, 安装. (简单略过). 运行python代码 运行python代码的常见方式有三种: 运行pytho ...

  10. Java类中中文问题

    一个奇怪问题 java类中要保存一个xml文件到数据库,2种传值方式其中1种不知何故会最终导致解析xml时报错. xml文件内容由StringBuffer定义,其中一段内容如下: sb.append( ...