史上最全的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. asp.net时间范围查询

    1.首先要查询类表中的一个时间段,要明确我的数据库中只有一个时间字段,我们先将他拆分一下. if ($("#news_OpenTime").val() != "" ...

  2. Webdriver常用的元素定位

    Webdriver常用定位元素的方法有以下八种: id.name.class name.tag name.link text.partial link text.xpath.class selecto ...

  3. Java Swing 如何实现记事本中“编辑”菜单下的 剪切,复制,粘贴,删除,全选 功能

    这篇文字将要学习以下知识点: 1.如何给JButton按钮添加鼠标点击事件监听器 #1.addMouseListener(MouseListener l)  给JButton添加一个鼠标点击监听器l ...

  4. iOS7之后的文本高度封装

    #import "NSString+Util.h" @implementation NSString (Util) +(CGFloat)changeStationWidth:(NS ...

  5. redirect-action

    功能: 点击login , redirect 到hello.jsp 显示 "hello" 点击redirect, redirect 到 error.jsp 显示 "err ...

  6. servlet之过滤器(转载)

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 一.Filter 1.过滤器的概念 Java中的Filter 并不是一个标准的Servlet ...

  7. hadoop 读取文件的两种方式

    1.操作javaAPI方式 static{ URL.setURLStreamHandlerFactory(new FsUrlStreamHandlerFactory()); } public stat ...

  8. javascript 拖放效果

    最近一直在看javascript的书籍,有些东西在书上看着貌似理解了,但是在真正动手实践时,其实有些细节你根本不了解.所以看起来就算是一个简单的效果,写起来也未必简单,就算写起来简单,写的代码也未必规 ...

  9. 邮件发送 java

    package com.sun.mail; import java.io.File;import java.io.IOException;import java.io.UnsupportedEncod ...

  10. 数学#素数判定Miller_Rabin+大数因数分解Pollard_rho算法 POJ 1811&2429

    素数判定Miller_Rabin算法详解: http://blog.csdn.net/maxichu/article/details/45458569 大数因数分解Pollard_rho算法详解: h ...