CSS hack 对于IE6,IE7,firefox显示信息不一样实际效

2021-01-20 14:22 jianzhan

差别不一样访问器的CSS hack写法:

差别IE6与FF:
        background:orange;*background:blue;

差别IE6与IE7:
        background:green !important;background:blue;

差别IE7与FF:
        background:orange; *background:green;

差别FF,IE7,IE6:
        background:orange;*background:green !important;*background:blue;

注:IE都能鉴别*;规范访问器(如FF)不可以鉴别*;

IE6能鉴别*,但不可以鉴别 !important,
IE7能鉴别*,也能鉴别!important;
FF不可以鉴别*,但能鉴别!important;

  IE6 IE7 FF * √ √ × !important × √ √



------------------------------------------------------
此外再填补1个,下划线"_",
IE6适用下划线,IE7和firefox均不适用下划线。

  IE6 IE7 FF * √ √ × !important × √ √ _ √ × ×


因而大伙儿还能够这样来区别IE6,IE7,firefox
: background:orange;*background:green;_background:blue;

注:无论是甚么方式,撰写的次序全是firefox的写在前面,IE7的写在正中间,IE6的写在最终面。

 


1、CSS HACK
下列两种方式基本上能处理现如今全部HACK.

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">

2、全能 float 闭合(十分关键!)

有关 clear float 的基本原理可参照 [How To Clear Floats Without Structural Markup]
将下列编码添加Global CSS 中,给必须闭合的div再加 ><style>
/* Clear Fix */

.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

有关闭合波动元素(clearing float)的方式如今早已许多了,本人觉得简易好用的方式便是应用:after伪类动态性的嵌入1个用于消除波动的元素,可是编码量太大了,看上去不足简约。

如今看到有个方式非常简易。详细介绍1下这个方式。原文在:http://annevankesteren.nl/2005/03/clearing-floats

这 1层面的基本原理是,外围元素之因此不可以很好的拓宽,难题出在了overflow上,由于overflow不能见(见W3C的解释)。如今要是将给外围元素添 加1个“overflow:auto”,便可以处理难题,結果是除IE,真的能够处理。下来就要处理ID的难题了,再再加“_height:1%”,这 个难题就彻底处理了。

下面的事例做为较为
1、沒有闭合波动元素;2、非IE下闭合波动元素;3、彻底闭合元素。有关编码以下:

XHTML编码:

Example Source Code [ww
w.52css.com]
<div id="wrap">
<div class="column_left">
   <h1>Float left</h1>
</div>
<div class="column_right">
   <h1>Float right</h1>
</div>
</div>


CSS款式:

Example Source Code [ww
w.52css.com]
#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
   .column_left{ float:left; width:20%; padding:10px;}
   .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}

 


3、别的适配技能(再度唠叨)

1, FF下给 div 设定 padding 后会致使 width 和 height 提升, 但IE不容易.(能用!important处理)
2, 垂直居中难题.
1).竖直垂直居中.将 line-height 设定为 当今 div 同样的高宽比, 再根据 vertical-align: middle.( 留意內容不必换行.)
2).水平垂直居中. margin: 0 auto;(自然并不是全能)
3, 若需给 a 标识内內容再加 款式, 必须设定 display: block;(普遍于导航栏标识)
4, FF 和 IE 对 BOX 了解的差别致使相差 2px 的也有设为 float的div在ie下 margin加倍等难题.
5, ul 标识在 FF 下面默认设置有 list-style 和 padding . 最好是事前申明, 以免无须要的不便. (普遍于导航栏标识和內容目录)
6, 做为外界 wrapper 的 div 不必定死高宽比, 最好是还再加 overflow: hidden.以做到高宽比自融入.
7, 有关手形光标. cursor: pointer. 而hand 只可用于 IE.

1 对于firefox ie6 ie7的css款式
如今绝大多数全是用!important来hack,针对ie6和firefox检测能够一切正常显示信息,
可是ie7对!important能够正确解释,会致使网页页面没按规定显示信息!寻找1个针
对IE7非常好的hack方法便是应用“*+html”,如今用IE7访问1下,应当沒有难题了。
如今写1个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-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
表明:
最先在父级元素界定TEXT-ALIGN: center;这个的意思便是在父级元素内的內容垂直居中;针对IE这样设置就早已能够了。
但在mozilla中不可以垂直居中。处理方法便是在子元素界定情况下设置时再再加“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
必须表明的是,假如你想用这个方式使全部网页页面要垂直居中,提议不必套在1个DIV里,你能够先后拆出好几个div,
要是在每一个拆出的div里界定MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 便可以了。

3 盒实体模型不一样解释.

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

4 波动ie造成的双倍间距

#box{ float:left; width:100px; margin:0 0 0 100px; //这类状况之下IE会造成200px的间距 display:inline; //使波动忽视}
这里细说1下block,inline两个元素,Block元素的特性是:一直在新行上刚开始,高宽比,宽度,行高,边距都可以以操纵(块元素);Inline元素的特性是:和别的元素在同1行上,...不能操纵(嵌入元素);

#box{ display:block; //能够为嵌入元素仿真模拟为块元素 display:inline; //完成同1行排序的的实际效果 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指令,它能够特定元素最少也不可以小于某个宽度,这样就可以确保排版1直正确。但IE不认得这个,
而它具体上把width作为最少宽度来使。以便让这1指令在IE上也能用,能够把1个<div> 放到 <body> 标识下,随后为div特定1个类:
随后CSS这样设计方案:
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第1个min-width是一切正常的;但第2行的width应用了Javascript,这仅有IE才认得,这也会让你的HTML文本文档不太正规。它具体上根据Javascript的分辨来完成最少宽度。

7 消除波动

.hackbox{ display:table; //将目标做为块元素级的报表显示信息}或.hackbox{ clear:both;}
或添加:after(伪目标),设定在目标后产生的內容,一般和content相互配合应用,IE不适用此伪目标,非Ie 访问器适用,
因此其实不危害到IE/WIN访问器。这类的最不便的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV波动IE文字造成3象素的bug

左侧目标波动,右侧选用外补钉的左侧距来精准定位,右侧目标内的文字会离左侧有3px的间隔.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:⑶px; //这句是重要}
HTML编码<div id="box"> <div id="left"></div> <div id="right"></div></div>

9 特性挑选器(这个不可以算是适配,是掩藏css的1个bug)

p[id]{}div[id]{}
这个针对IE6.0和IE6.0下列的版本号都掩藏,FF和OPera功效
特性挑选器和子挑选器還是有差别的,子挑选器的范畴从方式来讲变小了,特性挑选器的范畴较为大,如p[id]中,全部p标识中有id的全是一样式的.

10 IE捉迷藏的难题

当div运用繁杂的情况下每一个栏中又有1些连接,DIV等这个情况下非常容易产生捉迷藏的难题。
一些內容显示信息不出来,当电脑鼠标挑选这个地区是发现內容的确在网页页面。
处理方法:对#layout应用line-height特性 或给#layout应用固定不动高和宽。网页页面构造尽可能简易。

11 高宽比不融入

高宽比不融入是当里层目标的高宽比产生转变时外层高宽比不可以全自动开展调整,非常是当里层目标应用
margin 或paddign 时。
例:
<div id="box">
p目标中的內容
</div>
CSS:#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
处理方式:在P目标左右各加2个空的div目标CSS编码:.1{height:0px;overflow:hidden;}或为DIV再加border特性。