史上最全的CSS hack方式一览    CSS hack技巧大全    Can i use

CSS hack

CSS hack

由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

.bb{
height:32px;
background-color:#f1ee18;           /*所有识别*/
.background-color:#00deff\9;        /*IE6、7、8识别*/
+background-color:#a200ff;          /*IE6、7识别*/
_background-color:#1e0bd1;         /*IE6识别*/
}

@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{}  /*safari(Chrome) 有效 */

.bb, x:-moz-any-link, x:default{background-color:#00ff00;}            /*IE7 firefox3.5及以下 识别 */
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}       /* 仅firefox 识别 */
* +html .bb{background-color:#a200ff;}                                       /* 仅IE7 识别 */

兼容

CSS

filter 属性:

-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);

HTML

HTML5的语义化标签

让IE也支持HTML5语义化标签

一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样。

<script>
var html5Tags=['header' ,'footer','article','nav' ,'section','aside']
for(var i=0;i<html5Tags.length;i++){
document.createElement(html5Tags[i]);
}
</script>

实际上已经有人这么做了并分享在Google code project上方便大家直接调用。于是,我们可以使用IE条件注释来调用这个js文件,这样像FireFox等非IE浏览器就会忽视这段代码,也就不会有无谓的http请求了。

<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSSHack 兼容性的更多相关文章

  1. IE6 7下常见CSS兼容性处理

    以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...

  2. IE11的CSS兼容性问题

    最近测试给了我一大堆BUG,一瞅发现全是IE11的.吐槽一下这个浏览器真的比较特立独行.很多默认的样式跟别的浏览器不同,而且最明显的一点应该是padding左右内边距往往比别的浏览器大了一倍.但是当需 ...

  3. 对浏览器css兼容性的学习理解及问题解决汇总

    一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM.BOM ...

  4. csshack技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  5. Css几个兼容性问题

    1.BUG_fireFox!!!一个容器内的子容器如果要左右浮动的话,需要在这个容器设置上样式:"overflow:hidden". 注:内部元素浮动就会导致外面的容器的高度在fi ...

  6. Web前端浏览器兼容性个人经验总结

    前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后 ...

  7. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  8. SQL Server2008R2 在windows8上安装,出现“兼容性”和 “执行未经授权的操作”的错误!

    本人是windows8.1的操作系统,亲测安装成功 解决方法如下: 1.卸载干净sql Server2008r2,包括注册表内容,删除c盘下的安装路径! 2.关闭防火墙(这步很重要) 3.断开网络连接 ...

  9. [转载]强制不使用“兼容性视图”的HTML代码

    在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动选择"兼容性视图",强制IE以最高级别的可用模式显示内容呢?下面就介 ...

随机推荐

  1. javabean解决jsp中中文乱码问题

    问题描述:useBean行为定义了Java Bean对象(Person类包括姓名[string],年龄[int]),使用html页面向JSP页面提交数据,JSP页面中使用Java Bean行为来处理提 ...

  2. 输入身份证号码自动读取生日与性别(delphi)

    一.格式介绍: [15位号码格式] 1.第l一6位数为行政区划代码; 2.第7-12位数为出生日期代码; 3.第13---15位数为分配顺序代码; (1).行政区划代码,是指公民第一次申领居民身份证时 ...

  3. Java与JavaScript中判断两字符串是否相等的区别

    JavaScript是一种常用的脚本语言,这也决定了其相对于其他编程语言显得并不是很规范.在JavaScript中判断两字符串是否相等 直接用==,这与C++里的String类一样.而Java里的等号 ...

  4. 利用GCD实现单利模式的宏代码

    以下是.h文件,使用时,直接在需要实现单例模式的类中导入头文件即可. // .h文件 #define DenglSingletonH(name) + (instancetype)shared##nam ...

  5. LWP::UserAgent介绍1

    require LWP::UserAgent; my $ua = LWP::UserAgent->new; ); $ua->env_proxy; my $response = $ua-&g ...

  6. SSH整合例子

    三大框架: Struts框架 1. params拦截器: 请求数据封装 2. 类型转换/数据处理 3. struts配置 4. 文件上传/下载/国际化处理 5. 数据效验/拦截器 6. Ognl表达式 ...

  7. Date时间对象方法

  8. gerrit的merge conflict

    找了很多资料,最后参考http://blog.csdn.net/w_jewelry/article/details/8123639 解决的. 先把gerrit的那几个commit abandon掉. ...

  9. Major and minor numbers

    The major nuber is the driver associated with the device, while the minor number is used by the kern ...

  10. Linux使用rsync客户端与服务端同步目录进行备份

    一.服务端设置 1. 修改 server 端配置 # vi /etc/rsyncd.conf 修改: uid = nobody # 该选项指定当该模块传输文件时守护进程应该具有的uid.默认值为&qu ...