今天接了个新项目,年底要做完。预祝我顺利完成工作吧。在搭CSS框架的过程中,遇到了一些浏览器兼容性问题。于是就统计一下各个浏览器专用的css hack吧。

  (粘贴自百科百科)

  1. 针对火狐浏览器的CSS Hack:

    @-moz-document url-prefix() {    .selector {        attribute: value;    }}

  2. 针对webkit内核及Opera浏览器的CSS Hack:

    @media all and (min-width:0){    .selector {        attribute: value;/*for webkit and opera*/    }}

  3. 从这个样式我们只能把webkit内核的浏览器和Opera浏览器从其它浏览器中区分出来,但并不能区分它们俩,因此我们还需要在上面样式的基础上再加一个样式:

    @media screen and (-webkit-min-device-pixel-ratio:0) {    .selector {        attribute: valueForWebKit;/*only for webkit*/    }}

  4. 由于这个样式是针对webkit的,会把前面的样式覆盖掉,因此,通过这两个样式就能区分出webkit和opera了,opera的属性值取value,webkit的属性值取valueForWebKit。
  5. 其实按常规来说,我们一般是处理ie上的兼容问题,但遇到需要处理火狐或Chrome的兼容问题时,一定要先查看网页结构是否合理以及便签使用是否规范,直到迫不得已时再使用上面的CSS Hack。

不同浏览器下的CSS HACK的更多相关文章

  1. 浏览器的兼容性(CSS浏览器兼容性、CSS hack)

    一.关于CSS hack(尽量不用或者少用,减少页面复杂度) 1.条件注释法:(我的测试是IE9及其以下才有效) 这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式.举例如下 只在 ...

  2. 浏览器兼容性的css hack 写法

    IE各版本浏览器之间的识别概括如下: IE6:能识别 * .\9 和 _ ,不能识别 !important IE7:能识别 * .\9 和 !important,不能识别 _ IE8:能识别 \9 和 ...

  3. 浏览器兼容的css hack

    <style> div{ background:green; /* for firefox */ *background:red; /* for IE6 */ } </style&g ...

  4. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  5. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  6. CSS hack方式一览【转】

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  7. Web前端技术研究:Css hack技术---令人沮丧的技术

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

  8. css样式 --- CSS hack

    前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一 ...

  9. 史上最全的CSS hack方式一览

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

随机推荐

  1. XSLT教程 比较全的 -摘自网络

    XSLT教程 XML文档树 1) XML可以转化文档树 2) XSLT对XML的转化过程 内建模板规则 根 调用<xsl:apply-templates>处理根节点的儿子.处理时,使用调用 ...

  2. [TypeScript] Generating Definition Files

    TypeScript allows you to generate definition files for your own libraries. This lesson shows you how ...

  3. 底部菜单栏(三)Fragment+FragmentTabHost实现仿新浪微博底部菜单栏

    一.实现效果图 二.项目工程结构 三.详细代码编写 1.主tab布局界面,main_tab_layout: 双击代码全选 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  4. Java中List和ArrayList的区别(转)

    List是一个接口,而ListArray是一个类.  ListArray继承并实现了List.  所以List不能被构造,但可以向上面那样为List创建一个引用,而ListArray就可以被构造.  ...

  5. mysql 交互式连接和非交互式连接

    交互式客户端定义为在mysql_real_connect()中使用CLIENT_INTERACTIVE选项的客户端 mysql_real_connect() 函数介绍 函数原型描述: MYSQL *m ...

  6. Eclipse Key Shortcuts for Greater Developers Productivity--reference

    Posted by Ajitesh Kumar / In Java / June 6, 2014 http://vitalflux.com/eclipse-key-shortcuts-greater- ...

  7. 使用泛型定义一个可重用的Dao

    dao用来和数据库进行交互,一个项目中,可能有用户表,产品表等等,不可能为每一个表都建立一个dao,使用泛型可以实现通吃. UserDao.java public class UserDao < ...

  8. JavaScript与html5写的贪吃蛇完整代码

    JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...

  9. Oracle11g - dos 命令 sqlplus/nolog 提示 不是内部命令解决办法

    继安装Oracle 11g后,解锁SCOtt时发现 dos 命令 sqlplus/nolog 提示 不是内部命令解决办法   通过实际验证现整理有效方法步骤如下: 步骤一:开始>>找到Or ...

  10. SharePoint Dialog 使用

    SharePoint中弹出模态窗口对体验提高太大了 方法为: 父页面中调用子页面: function showDialog() {        var options = {             ...