这世间坑爹的东西不少，浏览器可以算做一件，尤其的IE浏览器。关于浏览器的吐槽已经有不少了，我也就不在这添油加醋了。不过吐槽终究只是泄一时之愤，解决问题才是关键，今天我们就来讲一讲浏览器（样式）兼容的技术——CSS Hack。

浏览器不兼容有很多方面，有的是javascript脚本不兼容，也有的是样式（CSS）的不兼容，而CSS Hack解决的就是样式不兼容的问题。在样式（CSS）上，各大浏览器都有着许多异常的解析。而本文将会着重讲一下著名的『盒式模型』的浏览器兼容方法！在最后，将会给大家一个几乎可以秒杀所有主流浏览器CSS兼容代码~

首先，我们来看看为什么IE浏览器在盒式模型上会有如此多的兼容问题。通常的表现形式就是整个页面的内容都走位了~

上图即为一个标准的盒式模型，Box就是网页元素的实体内容，那么在它外层的是Padding(内边距)、Border(边框)、Margin(外边距)。也就是说，一个网页上的元素，其实际所占用的宽度

L = width + padding + border + margin 。

那么接下来我们看看IE6浏览器是怎么解析的。

我们可看到明显变化的是width和height，padding和border被包含到里面去了。因此现在一个网页上的元素，其实际所占用的宽度

L = width + margin 。

所以，只要你的CSS中没有使用太多的横向padding值，网页也不会发生严重的错位。当然，前提是你的其他CSS写法是符合标准的~

那么我们要如何解决这个问题呢？很显然，最简单的办法是给IE定义不同的宽度。那么有几种办法。

一、<!--[if IE]>

IE浏览器可以解析出<!--[if IE]><![endif]-->里面包含的代码。而其他浏览器则会将其当作注释。因此你可以在里面加上任何你只想让IE解析到的东西。

<!--[if IE]>

<link href="ie_styles.css" rel="stylesheet" type="text/css" />

<![endif]-->

然后，我们也可以定义对那些版本的IE产生影响。

比如：<!--[if lt IE 9]> 表示低于IE9的版本，lte则表示低于等于，gt表示高于，gte表示高于等于。

此外，对于非IE浏览器，这可以使用

<!--[if !IE]><!-->

  <link href="notie_styles.css" rel="stylesheet" type="text/css" />

<!--<![endif]-->

请注意它与<!--[if IE]>写法的不同，在IE浏览器中，里面包含的内容则会被当作注释，而非IE浏览器，则是当作普通的代码解析。

二、CSS漏洞

上面那种方法其实是IE有意为之的解析方法，应该算是他糟糕的CSS解析方法的一种补偿吧，而接下来讲的方法，则是切切实实利用浏览器本身解析CSS的漏洞，来实现CSS Hack！

<head>

<style>

.hack{

    color:#000000; /* FF,OP支持 */

    color:#0000FF\0; /* IE8支持*/

    *color:#FFFF00; /* IE7支持 */

    _color:#FF0000; /* IE6支持 */

}

body:nth-of-type(1) .hack{

    color: #00FF00;/*Webkit */

}

</style>

</head>

<body>

    <p class="hack">

        CSS Hack !

    </p>

</body>

上面这段代码，在不同浏览器中『CSS Hack ! 』将会显示出不同的颜色出来。

其中Firefox和Opera显示黑色(#000000)，IE8显示蓝色(#0000FF)，IE7显示黄色(#FFFF00)，IE6显示红色(#FF0000)，Chrome和Safari则显示绿色(#00FF00)。

只要将color改为你需要控制的任何属性，就可以在任何主流浏览器实现对其属性的Hack~

尤其需要注意的是，写的时候要严格按照其先后顺序。

今天介绍了两种CSS Hack的方法，希望对你有点用处吧~

CSS Hack技术（一）的更多相关文章

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

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

  2. CSS Hack技术详解，支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera

    转自: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm 当前网络时代,各种各样的网页向我们展示着丰富多彩 ...

  3. CSS Hack技术介绍及常用的Hack技巧集锦

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  4. CSS hack技术

    首先我们要了解一个概念CSS hack 不同浏览器,比如IE6.IE7.IE8,Mozilla Firefox等,对CSS的支持及解析结果不同,因此会导致相同的网页生成的页面效果不一样. 这个时候我们 ...

  5. CSS Hack技术介绍及常用的Hack技巧

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  6. 常用的CSS Hack技术集锦

    来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Ha ...

  7. 经常使用的CSS Hack技术集锦

    来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致同样的CSS输出的页面效果不同,这就须要CSS Ha ...

  8. 用CSS hack技术解决浏览器兼容性问题

    什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CSS ...

  9. 简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera

    一.跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同.因此使CSS hack技术进行浏 ...

随机推荐

  1. Java正则表达式之语法规则

    正则表达式是一种强大而灵活的文本处理工具,使用正则表达式能够以编程的方式,构造复杂的文本模式,并对输入的字符串进行搜索.一旦找到了匹配这些模式的部分,就能够随心所欲地它们进行处理.正则表达式提供了一种 ...

  2. nodejs简单层级结构配置文件

    在NodeJS中使用配置文件,有几种比较不错的方案:第一种:文件格式使用json是毋容置疑的好方案.格式标准,易于理解,文件内容读取到内存之后,使用JSON的标准分析函数即可得到配置项.第二种:将配置 ...

  3. Memcached 内存级缓存

    Memcached在大型网站中应用    memcached是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视 频.文件以及 ...

  4. 嵌入式 fork与vfork的区别

    fork()与vfock()都是创建一个进程,那他们有什么区别呢?总结有以下三点区别: 1.  fork  ():子进程拷贝父进程的数据段,代码段     vfork ( ):子进程与父进程共享数据段 ...

  5. B-树和B+树

    B-树和B+树是一种平衡的多路查找树,它在文件系统中很有用.一颗m阶的b-树,或为空树,或满足下列特性的m叉树.1)树中每个节点至多有m棵子树2)若根结点不是叶子结点,则至少有两棵子树.3)除根之外的 ...

  6. 把php.exe加入系统环境变量-使用命令行可快速执行PHP命令

    有时候在执行长时间运行的脚本程序的时候,浏览器是架不住的.我们就可以使用CMD命令行或者LINUX命令行执行PHP程序 1.把PHP.EXE加入到环境变量,不用每次都进入到PHP的目录 ①  右击我的 ...

  7. 【C#】如何创建xml文件以及xml文件的增、改

    增: using System; using System.Collections.Generic; using System.Linq; using System.Text.RegularExpre ...

  8. scrollTop

    scrollTop 表示滚动的高度,默认从position:0;开始向下滚,scrollTop(offset)的offset表示相对顶部的偏移,以像素计,<br/> scrollTop() ...

  9. SpringMVC + Spring + MyBatis 学习笔记：SpringMVC和Spring一同工作的时候，AOP事务管理不起作用的解决方法

    系统:WIN8.1 数据库:Oracle 11GR2 开发工具:MyEclipse 8.6 框架:Spring3.2.9.SpringMVC3.2.9.MyBatis3.2.8 SpringMVC 的 ...

  10. 拜托，这才是“Uber”的正确读法

    在美国,私家车主可以注册成为Uber司机,这对传统的出租车行业形成了很大的挑战,同时也让Uber始终处于舆论的风口浪尖. 7月14日,美国用车应用Uber正式宣布进入北京市场.在进入中国后,Uber选 ...