这世间坑爹的东西不少，浏览器可以算做一件，尤其的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. 分布式网站架构后续：zookeeper技术浅析

    Zookeeper是hadoop的一个子项目,虽然源自hadoop,但是我发现zookeeper脱离hadoop的范畴开发分布式框架的运用 越来越多.今天我想谈谈zookeeper,本文不谈如何使用z ...

  2. Google Code Pretiffy 代码 着色 高亮 开源 javascript（JS）库

    1.简介 introduction Google Code Pretiffy 是 Google 的一个用来对代码进行语法着色的 JavaScript 库,支持 C/C++, Java, Python, ...

  3. python练习程序（c100经典例20）

    题目: 一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? def foo(height,num): sum=height; pr ...

  4. python练习程序（c100经典例15）

    题目: 利用条件运算符的嵌套来完成此题:学习成绩〉=90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示. def foo(n): if n>=90: print 'A' , ...

  5. Solr部署准备

    ---恢复内容开始--- 1.配置安装JDK1.7以上的版本 2.下载solr包 http://archive.apache.org/dist/lucene/solr/4.9.0/ 3.安装web容器 ...

  6. GenericRepository

    public interface IGenericRepository<TEntity> where TEntity : class { IQueryable<TEntity> ...

  7. makefile实例（2）-多个文件实例

    1,源文件依赖关系 defs.h command.h buffer.h main.cpp * util.cpp * kde.cpp * * command.cpp * * display.cpp * ...

  8. CSS隐藏元素的几种妙法

    一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...

  9. Maven安装testNG

    1.Maven安装testNG (1)打开网站:http://testng.org/doc/maven.html (2)复制如下代码,粘贴到项目的pom.xml文件: 1 <dependency ...

  10. LoadRunner参数数组

    参数数组提供了对一类参数集中存放的机制,其中LR内置的几个函数有:lr_paramarr_idx().lr_paramarr_len().lr_paramarr_random() 同时参数数组必须满足 ...