CSS Hack

  1.由于不同厂商的浏览器,比如Internet Explorer,Safari,Chrome,Mozila Firefox等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 CSS hack的目的就是使你的CSS代码兼容不同的浏览器。

  2.CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack.

  (1)CSS Hack主要针对类内部Hack:比如 IE6能识别下划线"_"和星号" * ",

                    IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。

  (2)选择器Hack:比如 IE6能识别*html selector{property:value},

          IE7能识别*+html selector{property:value}或者*:first-child+html selector{property:value}。

  (3)HTML头部引用(if IE)Hack:针对所有IE:<!--[if IE]><!--自己的代码--><![endif]-->,

                 针对IE6及以下版本:<!--[if lt IE 7]><!--自己的代码--><![endif]-->,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

  书写顺序,一般是将识别能力强的浏览器的CSS写在后面。

  3.常用的hack方式

  (1)条件注释

    只在IE6下生效
    <!--[if IE 6]>这段文字只在IE6浏览器显示<![endif]-->
    只在IE6以上版本生效
    <!--[if gte IE 6]>这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->
    只在IE下生效
    <!--[if IE]>这段文字只在IE浏览器显示<![endif]-->
    只在IE8上不生效

    <!--[if ! IE 8]>这段文字在非IE8浏览器显示<![endif]-->
    非IE浏览器生效
    <!--[if !IE]>这段文字只在非IE浏览器显示<![endif]-->
  (2) 类内属性前缀
    
      ①“-″减号是IE6专有的hack
      ②“\9″ IE6/IE7/IE8/IE9/IE10都生效
      ③“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
      ④“\9\0″ 只对IE9/IE10生效,是IE9/10的hack
    (3)选择器前缀
      ①*html *前缀只对IE6生效
      ②*+html *+前缀只对IE7生效
      ③@media screen\9{...}只对IE6/7生效
      ④@media \0screen {body { background: red; }}只对IE8有效
      ⑤@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
      ⑥@media screen\0 {body { background: green; }} 只对IE8/9/10有效
      ⑦@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
      ⑧@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
      ⑨@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的
      ⑩@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识
      ⑾@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/ 
    (4)

      IE6能识别*;不能识别 !important;
      IE7能识别*,能识别!important;
      FF不能识别*,但能识别!important;
    (5)浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
    (6)CSS内部属性级Hack

      语法:selector{<hack>?property:value<hack>?;}
      取值:
      _: 选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。
      *:选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高。
      \9:选择IE6+。
      \0:选择IE8+和Opera。
      [;property:value;]; 选择webkit核心浏览器(Chrome,Safari)。IE7及以下也能识别。中括号内外的3个分号必须保留,第一个分号前可以是任意规则或任意多个规则。 [;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则,所以通常选用第一种写法最为简洁。
 
      http://www.duitang.com/static/csshack.html
      

CSS Hack相关知识的更多相关文章

  1. CSS的相关知识——背景,超链接,列表,表格,奇偶选择器

    接着上一篇总结一些css的相关知识 ㈠背景 背景属性 1.background-color 背景颜色   rgb函数设置 2.background-image   背景图片  url(“logo.jp ...

  2. 介绍CSS的相关知识

    以下是我跟大家分享的有关CSS的相关知识点: ①什么是CSS? css(Cascading Style Sheets)是层叠样式表 ②css的三种样式使用方法: 1,内联样式表:直接在html标签属性 ...

  3. CSS属性相关知识

    Css选择器 选择器的权重 在css中,哪个选择器的权重高,就走谁的样式. 标签选择器的权重是 1 Class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !im ...

  4. 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解

    什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...

  5. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  6. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  7. 移动WEB像素相关知识

    了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...

  8. css3复杂选择器+内容生成+Css Hack

    1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...

  9. CSS hack方式一览【转】

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

随机推荐

  1. yum下载rpm

    yum下载rpm yum update --downloadonly --downloaddir=/root/rpm_package/   python-pip

  2. LuaXMLRPC笔记

    XMLRPC XMLRPC 为以http为传输协议,使用xml格式化数据来执行远程过程调用, 区别于本地过程调用, 即发生在不同主机之间. 属于分布式计算的一种简单实现,比web service简单易 ...

  3. oracle生成主键

    SELECT 'ZTO'||TO_CHAR(SYSDATE,'yymmdd')||TO_CHAR(SEQ_COMMON_ORDER.NEXTVAL,'FM00000000') AS orderCode ...

  4. 学习 Linux,101: 使用基本 SQL 命令

    概述 在本教程中,将学习结构化查询语言 (SQL),包括: 使用基本 SQL 命令 执行基本数据操作 本教程将简要介绍您需要知道的与 LPI 102 考试相关的 SQL 概念.   回页首 数据库和 ...

  5. IPC

    IPC,全名Inter Process Communication即进程间通讯,在同一台机器上的两个进程就用IPC,不能跨物理机器。IPC包括共享内存、队列、信号量等几种方式,由于IPC通讯效率之高, ...

  6. js setInterval

    var monitorInterval = null;    //检索cs 是否处理完成 开始: monitorInterval = setInterval(function () { CheckCS ...

  7. Elementory os install .net core

    ref link : https://www.microsoft.com/net/core#linuxubuntu sudo sh -c 'echo "deb [arch=amd64] ht ...

  8. atomic vs. nonatomic

    Declaring a property atomic makes compiler generate additional code that prevents concurrent access ...

  9. JavaScript DOM 编程艺术(第2版)读书笔记 (9)

    三位一体的网页 结构层:由HTML或XHTML之类的标记语言负责创建: 表示层:由CSS负责完成: 行为层:负责内容应该如何响应事件这一问题.这是由JavaScript语言和DOM主宰的领域. 分离 ...

  10. laravel框架总结(六) -- 门面(facades)

    Facades 为应用程序的服务容器中可用的类提供了一个「静态」接口.   Laravel 本身附带许多的 facades,甚至你可能在不知情的状况下已经在使用他们!   xpower的静态接口(门面 ...