史上最全的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. typeof做类型判断时容易犯下的错

    学过js同学都知道js的数据类型有 字符串.数字.布尔.Null.Undefined和object(数组.function......) 作为一个初学者我一直认为每个数据类型返回的结果是这样的 typ ...

  2. java调用wsdl xfire和cxf两种方式

    xfire 如下: String spID = ""; String password = ""; String accessCode = "&quo ...

  3. ubuntu14.04下安装ice3.5.1

    ubuntu 14.04下是可以通过下面这条指令安装ice3.5的 sudo apt-get install libzeroc-ice35-dev 1. 从这里下载ice源文件 主要包括两部分:ice ...

  4. 阿里云-对象储存OSS

    最近 需要搞一个阿里云的文件上传 手机端主要做了图片上传 pod安装:pod 'AliyunOSSiOS', '~> 2.5.2' 主要就是需要四个参数:accessKey secretKey  ...

  5. Drupal设置首页默认内容

    接触Drupal时间不长,记录一下学习点滴~ Drupal首页的内容,默认是取node表的内容展示的,如果想让首页展示自己创表的内容怎么办呢?以Drupal7为例 在这个admin/config/sy ...

  6. MyBatis 异常 集锦

    异常1.使用映射器 (还没有使用Spring) 异常信息摘要: org.apache.ibatis.binding.BindingException: Type interface com.jege. ...

  7. ubuntu下安装teamviewer

    Ubuntu 14.04 安装teamviewer出现安装32位依赖包 wget http://download.teamviewer.com/download/teamviewer_i386.deb ...

  8. 路由页面缓存开启 以及 keep-alive 给你埋下的坑

    为什么要用keep-alive呢, 因为这个会缓存dom模板, 下次再回到这个页面, 就可以利用这个已经渲染好的dom结构了, 如果数据不一样, 也会启用 virtualDoM 进行diff更新, 这 ...

  9. MTK平台Android中常用的路径

    开机Logo的路径: bootable\bootloader\lk\dev\logo 开机Logo图片分辨率路径: device\rq\rq6735_35gt_b_l1\ProjectConfig.m ...

  10. 【转】HDU1028

    转自博客园ID:2108,老卢同志 http://www.cnblogs.com/--ZHIYUAN/p/6102893.html Ignatius and the Princess III Time ...