这世间坑爹的东西不少，浏览器可以算做一件，尤其的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. 使用过的Linux命令

    1 在vim中编辑python,由于tab是8个空格,然而python中是4个,需要替换 :%s/\t/    /g 2 tar tar -czvf topic_dt_poi.0801.0818.ta ...

  2. session共享，格式json，php不能简单的设置session.serialize_handler=json,目前只有php，wddx(xml),安装扩展后还有igbinary(二进制)

    即使session_save_handler被自己的类或者方法重写,write与read的出入数据都还是被序列化的,而且被session序列化不是一般的序列化...还是不能解解决memcached保存 ...

  3. ORA-10456:cannot open standby database;media recovery session may be in process

    http://neeraj-dba.blogspot.com/2011/10/ora-10456-cannot-open-standby-database.html   Once while star ...

  4. oracle sql语句跟踪

    select b.SQL_TEXT,b.FIRST_LOAD_TIME,b.SQL_FULLTEXT    from v$sqlarea b    order by  b.FIRST_LOAD_TIM ...

  5. Drupal配置文件settings.php搜索规则

    Drupal的配置文件搜索是通过bootstrap.inc的conf_path()函数实现的: function conf_path($require_settings = TRUE, $reset ...

  6. java int和String类型之间的相互转换

    String --> int 第一种方法:int i = Integer.parseInt(s); 第二种方法:int i = Integer.valueOf(s).intValue(); 两种 ...

  7. 插入排序 --- 排序算法 --- 算法 --- java

    设数组为a[0…n-1]. 1.      初始时,a[0]自成1个有序区,无序区为a[1..n-1].令i=1 2.      将a[i]并入当前的有序区a[0…i-1]中形成a[0…i]的有序区间 ...

  8. Python 时间整理

    在平常的代码中,我们常常需要与时间打交道.在Python中,与时间处理有关的模块就包括:time,datetime以及calendar.这篇文章,主要讲解time模块. 在开始之前,首先要说明这几点: ...

  9. C++中string 的使用

    string类的构造函数:string(const char *s);    //用c字符串s初始化string(int n,char c);     //用n个字符c初始化此外,string类还支持 ...

  10. Python 学习笔记（六）正则扩展标记

    1. (?:...) 不想保存括号里匹配项时使用 The (?:...) notation should be fairly popular; with it, you can groupparts ...