元素CSShack：针对IE6IE7IE8IE9firefox显示不同效果

csshack 时间:2021-04-22 阅读:()

CSS hack针对IE6 IE7 IE8 IE9 firefox显示不同效果

区别不同浏览器的CSS hack写法

区别IE6与其它浏览器background:orange;_background:blue;

区别IE6与IE7background:green! important;background:blue;

区别IE6、 IE7与FFbackground:orange; *background:green;

区别FF IE7 IE6background:orange;*background:green! important;*background:blue;

区别IE与非IE浏览器background:orange;background:green\9;所有IE浏览器都识别(IE6、 IE7、

IE8、 IE9)

注 IE6/7能识别*;标准浏览器(如FF)不能识别*background-color:orange\0; /*识别ie 8/9*/background-color:orange\9\0; /*识别ie 9*/

IE6能识别*但不能识别! important,

IE7能识别*也能识别! important;

FF不能识别*但能识别! important;

IE6 IE7 FF

------------------------------------------------------

另外再补充一个下划线"_",

IE6支持下划线 IE7和firefox均不支持下划线。

IE6 IE7 FF * √ √ × × √ √ _ √ × ×

! important

于是大家还可以这样来区分IE6 IE7 firefox

: background:orange;*background:green;_background:blue;

注不管是什么方法书写的顺序都是firefox的写在前面 IE7的写在中间 IE6的写在最后面。

一、 CSS HACK

以下两种方法几乎能解决现今所有HAC K.

1 , ! important

随着IE7对! important的支持, ! important方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

<stylegt;

#wrapper

{width: 100px! important; /* IE7+FF*/width:80px; /* IE6*/

}

</stylegt;

2, IE6/IE77对FireFox

*+html与*html是IE特有的标签, firefox暂不支持.而*+html又为IE7特有标签.<style>

#wrapper

{

#wrapper {width: 120px; } /*FireFox*/

*html#wrapper {width:80px;} /* ie6 fixed*/

*+html#wrapper {width:60px;} /* ie7 fixed,注意顺序*/

}

</style>

注意:

*+html对IE7的HACK必须保证HTML顶部有如下声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

二、万能float闭合(非常重要!)

关于clearfloat的原理可参见[HowTo Clear Floats Without Structural Markup]

将以下代码加入Global CSS中,给需要闭合的div加上><style>

/*Clear Fix*/

.clearfix:after

{content:".";display:block;height:0;clear:both;visibi l ity:hidden;

}

.clearfix

{display: inl ine-block;

}

/*Hide from IE Mac*/

.clearfix{display:block;}

/*End hide from IE Mac*/

/*end of clearfix*/

</style>

关于闭合浮动元素clearing float的方法现在已经很多了个人认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素可惜代码量太大了看上去不够简洁。现在看到有个方法超级简单。介绍一下这个方法。原文在http://annevankesteren.nl/2005/03/clearing-floats

这一方面的原理是外围元素之所以不能很好的延伸 问题出在了overflow上 因为overflow不可见见W3C的解释。现在只要将给外围元素添加一个“overflow:auto” 就可以解决问题结果是除了IE真的可以解决。下来就要解决ID的问题了再加上“_height:1%” 这个问题就完全解决了。

下面的例子作为比较

1 、没有闭合浮动元素 2、非IE下闭合浮动元素 3、完全闭合元素。相关代码如下XHT ML代码

Example Source Code[www.52css.com]

<h1>Float left</h1>

</div>

<h1>Float right</h1>

</div>

CSS样式

Example Source Code[www.52css.com]

#wrap{border:6px#ccc sol id;overflow:auto;_height:1%;}

.column_left{ float: left;width:20%;padding:10px;}

.column_right{ float:right;width:75%; padding:10px;border-left:6px#eee sol id;}

三、其他兼容技巧(再次啰嗦)

1 ,FF下给div设置padding后会导致width和height增加,但IE不会.(可用! important解决)

2,居中问题.

1).垂直居中.将 l ine-height设置为当前div相同的高度,再通过vertical-al ign:middle.(注意内容不要换行.)

2).水平居中.margin:0 auto;(当然不是万能)

3,若需给a标签内内容加上样式,需要设置display:block;(常见于导航标签)

4, FF和IE对BOX理解的差异导致相差2px的还有设为float的div在ie下margin加倍等问题.

5, ul标签在FF下面默认有l ist-style和padding .最好事先声明,以避免不必要的麻烦.(常见于导航标签和内容列表)

6,作为外部wrapper的div不要定死高度,最好还加上overflow: hidden.以达到高度自适应.

7,关于手形光标.cursor:pointer.而hand只适用于IE.

1针对firefox ie6 ie7的css样式

现在大部分都是用! important来hack对于ie6和firefox测试可以正常显示

但是ie7对! important可以正确解释会导致页面没按要求显示找到一个针

对IE7不错的hack方式就是使用“*+html” 现在用IE7浏览一下应该没有问题了。现在写一个CSS可以这样

#1 {color:#333; } /*Moz*/

*html#1 {color:#666; } /* IE6*/

*+html#1 {color:#999; } /* IE7*/

那么在firefox下字体颜色显示为#333 IE6下字体颜色显示为#666 IE7下字体颜色显示为#999。

2 css布局中的居中问题

主要的样式定义如下body{TEXT-AL IG N:center;}

#center {MARGI N-RIG HT:auto;MARGI N-LEFT:auto; }

说明

首先在父级元素定义TEXT-ALIG N:center;这个的意思就是在父级元素内的内容居中对于IE这样设定就已经可以了。

但在mozi l la中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGI N-LEFT:auto; ”

需要说明的是如果你想用这个方法使整个页面要居中建议不要套在一个DIV里你可以依次拆出多个div

只要在每个拆出的div里定义MARG I N-RIGHT:auto;MARG I N-LEFT:auto;就可以了。3盒模型不同解释.

#box{width:600px; //for ie6.0-w\idth:500px; //forff+ie6.0}

#box{width:600px! important //forff width:600px; //for ff+ie6.0 width/**/:500px; //for ie6.0-}4浮动ie产生的双倍距离

#box{ float: left;width:100px;margin:000 100px; //这种情况之下IE会产生200px的距离display: inl ine; //使浮动忽略}

这里细说一下block, inl ine两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素); Inl ine元素的特点是:和其他元素在同一行上, . . .不可控制(内嵌元素);#box{ display:block; //可以为内嵌元素模拟为块元素display: inl ine; //实现同一行排列的的效果diplay:table;

5 IE与宽度和高度的问题

IE不认得min-这个定义但实际上它把正常的width和height当作有min的情况来使。这样问题就大了如果只用宽度和高度

正常的浏览器里这两个值就不会变如果只用min-width和min-height的话 IE下面根本等于没有设置宽度和高度。

比如要设置背景图片这个宽度是比较重要的。要解决这个问题可以这样

#box{width: 80px; height: 35px;}html>body#box{width: auto; height: auto;min-width:80px;min-height:35px;}

6页面的最小宽度min-width是个非常方便的CSS命令它可以指定元素最小也不能小于某个宽度这样就能保证排版一直正确。但IE不认得这个

而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用可以把一个<div>放到<body>标签下然后为div指定一个类

然后CSS这样设计

#container{ min-width: 600px; width:expression(document.body.cl ientWidth < 600?"600px": "auto" );}

第一个min-width是正常的但第2行的width使用了Javascript这只有IE才认得这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7清除浮动

.hackbox{display:table; //将对象作为块元素级的表格显示}或者.hackbox{clear:both;}或者加入:after 伪对象 ,设置在对象后发生的内容通常和content配合使用 IE不支持此伪对象非Ie浏览器支持