这世间坑爹的东西不少，浏览器可以算做一件，尤其的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. C++ 编写Windows service

    最近实现一个windows server端守护进程启动服务功能(c++实现),遇到了一些问题,记录一下 1. 启动Service实现代码: int _tmain(int argc, TCHAR* ar ...

  2. 【解题报告】zju-1030 Farmland

    原题地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=30 题目大意: 平面图有一些点和一条边,要求找这样的多边形: 1.边的 ...

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

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

  4. 如何使用java中的对象

    使用java中的对象,分2步: 1.创建一个对象: 2.使用对象的属性和方法. 见下面的示例代码: package com.imooc; //1.定义一个类 public class Telphone ...

  5. Hibernate查询出现java.lang.IllegalArgumentException异常解决方法

    Hibernate查询出现java.lang.IllegalArgumentException. 异常信息如下:java.lang.IllegalArgumentException        at ...

  6. Android数据库升级，数据不丢失解决方案

    假设要更新TableC表,建议的做法是: 1) 将TableC重命名为TableC_temp SQL语句可以这样写:ALERT TABLE TableC RENAME TO TableC_temp; ...

  7. SNIFFER问题集锦

    SNIFFER相关教程下载: Sniffer使用教程.pdf|Sniffer用法.ppt 具体问题解决: 1.SNIFFER4.75无法使用,打开后提示 No adapter is binding t ...

  8. 黑马程序员——Foundation之NSString和NSMutableString

    ------Java培训.Android培训.iOS培训.Net培训.期待与您交流!------ 在OC中NSString是一个非常重要的字符串类;和C语言的字符串不用的是,C语言的字符串是用双引号括 ...

  9. 10个常见的IE bug和解决方法

    1.IE6 幽灵文本(Ghost Text bug) 在我写本文之前,我遇到了这个bug.它相当的古怪和滑稽.一块不知哪来的重复的文本,被IE6显示在靠近原文本的下面.(译注:也可以参看 Explor ...

  10. 不定高度的div背景或背景图片不显示问题

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. ...