今天接了个新项目,年底要做完。预祝我顺利完成工作吧。在搭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. Ruby on Rails Session 1: How to Build a Ruby on Rails on the Ubuntu.

    About Ruby on Rails Ruby on Rails is an application stack that provides developers with a framework ...

  2. How to effectively work with multiple files in Vim?

    Why not use tabs (introduced in Vim 7)? You can switch between tabs with :tabn and :tabp, With :tabe ...

  3. android 使用intent传递参数实现乘法计算

    主界面上是两个EditText和一个按钮.用于输入两个数字参数. calcute.xml: <?xml version="1.0" encoding="utf-8& ...

  4. MySQL执行计划 EXPLAIN参数

    MySQL执行计划参数详解 转http://www.jianshu.com/p/7134286b3a09 MySQL数据库中,在SELECT查询语句前边加上“EXPLAIN”或者“DESC”关键字,即 ...

  5. Yii2 验证码

    没有用默认的layout  验证码点击不会改变 下面是静态页面代码 <div class="col-sm-12 login"> <div class=" ...

  6. WDCP是什么 关于WDCP的详细介绍

    WDCP是WDlinux Control Panel的简称,是一套用PHP开发的Linux服务器管理系统以及虚拟主机管理系统,,旨在易于使用Linux系统做为我们的网站服务器,以及平时对Linux服务 ...

  7. DocX组件读取与写入Word

    本文转载:http://www.cnblogs.com/yanweidie/p/3861482.html 由于上周工作比较繁忙,所以这篇文章等了这么久才写(预告一下,下一个章节正式进入NVelocit ...

  8. shell 脚本执行日志通用模块

    目标 实现记录SHELL执行的開始时间,结束时间.执行状态,错误信息等,以函数封装日志记录的方式,脚本调用函数 源代码 通用函数脚本program_log_new.sh function init_l ...

  9. JQuery和UpdatePannel的问题

    转: http://www.cnblogs.com/Tim_Liu/archive/2010/11/25/1887937.html 最近在做一个项目,因为涉及到的字段数量很多所以想偷把懒,便使用了Up ...

  10. android 66 sharedperference的使用

    package com.itheima.qqlogin; import java.io.BufferedReader; import java.io.File; import java.io.File ...