这世间坑爹的东西不少，浏览器可以算做一件，尤其的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. ORA-00257错误

    Archiver error,connect internal only,until freed   表示归档日志目录已满,用户不能再连接数据库,现有用户可继续查询数据库,但是不能执行DML语句 插删 ...

  2. c可变参数函数

    C函数要在程序中用到以下这些宏: <pre lang="c" escaped="true">void va_start( va_list arg_p ...

  3. 【转】eclipse安装shell编辑插件shellEd

    原文网址:http://blog.csdn.net/just_lion/article/details/7764777 1. 安装man page viewer Help->Install Ne ...

  4. 聊聊Dataguard的三种保护模式实验（上）

    Data Guard是Oracle高可用性HA的重要解决方案.针对不同的系统保护需求,DG提供了三种不同类型的保护模式(Protection Mode),分别为:最大保护(Maximum Protec ...

  5. JS面向对象组件（五） -- 复制对象（拷贝继承）

    研究到这儿,竟然出现了一个面试题目 var a = { name : '小明' }; var b = a; b.name = '小强'; alert( a.name ); 结果必然是“小强”,原因是对 ...

  6. JBPM4之decision节点：1、好学生 | 坏学生

    JBPM入门系列文章: JBPM4入门——1.jbpm简要介绍 JBPM4入门——2.在eclipse中安装绘制jbpm流程图的插件 JBPM4入门——3.JBPM4开发环境的搭建 JBPM4入门—— ...

  7. perl环境配置以及Eclipse安装perl开发插件

    简介: 这篇文章将详细介绍 EPIC 组件的安装,EPIC 编辑环境,调试运行环境,着重介绍如何使用 EPIC 来快速.简便.准确地调试 Perl 语言程序,包括对于 Perl 程序的单步执行,断点用 ...

  8. 嵌入式 arm平台ping域名指定ip小结

    在fs的目录/etc/下添加文件hosts,然后内容修改如下: 192.168.11.12 qycam.com ping qycam.com 解析为192.168.11.12

  9. 为网站添加网址图标favicon.ico

    今天终于有时间把domety的图标设计好,并显示在了网站地址前面.如果你还不知道怎么把自己的图标放到网站上,今天DDBug就和你分享一下实现方法. 制作图标 首先是准备一张ico图标,你可以从网上搜索 ...

  10. sed命令使用记录

    背景:文件A,文件B,文件格式一致,有两列,第一列为key,第二列为value. 目的:将文件A中的内容插入到文件B中,不能在最后,不能有重复key(我的key和value用tab键分割) 实现:我的 ...