秒杀所有浏览器盒式模型兼容问题的CSS Hack技术

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

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

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

标准盒式模型

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

L = width + padding + border + margin 。

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

IE盒式模型

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

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的方法,希望对你有点用处吧~

 

 

相关内容

 
© 2001-2017 MYSZIIT.COM. All Rights Reserved.