浏览器IE6IE7IE8Firefox兼容的csshack补充

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

IE6 IE7 IE8 Firefox兼容的css hack补充!

问题有很多要在开发过程中不断总结这里根本不可能说全。

最主要的IE下的BUG

双空白边浮动

相对容器中的绝对定位

重复字符

3像素文本偏移

断头台

躲躲猫

消失的margin-bottom

以上是主要的在IE下的BUG具体问题要具体解决css hacks (ie6, ie7, ie8,firefox)

IE6能识别下划线"_"和星号"*" IE7能识别星号"*"但不能识别下划线"_"却可以识

别。等等

书写顺序一般是将识别能力强的浏览器的CSS写在后面。下面列举常用的CSShack方法

1 !important

! i mporta nt作用是提高指定样式规则的应用优先权。

IE7以及所有标准浏览器能识别! important

区别IE6与IE7与其他浏览器

.browserTes t

{border:20pxsol id#60A179! important;border:20pxsol id#00F;

}

在Mozi l la中或者IE7浏览时候能够理解! important的优先级 因此显示#60A179的颜色

在IE6中浏览时候不能够理解! important的优先级 因此显示#00F的颜色

2 *

IE都能识别*标准浏览器(如火狐)不能识别*

区别IE6与火狐

.browserTes t

{border:20pxsol id#60A179;

*border:20pxsol id#00F;

}

区别IE7与火狐

.browserTes t

{border:20pxsol id#60A179;

*border:20pxsol id#00F;

}

区别IE7 IE6与火狐

.browserTes t

{border:20pxsol id#60A179;

*border:20pxsol id#00F! important;

*border:20pxsol id###;

}

3

IE6支持下划线 IE7和fi refox均不支持下划线

区别IE7 IE6与火狐

.browserTes t

{border:20pxsol id#60A179;

*border:20pxsol id#00F;

_border:20pxsol id###;

}

/*不管是什么方法书写的顺序都是fi refox的写在前面 IE 7的写在中间 IE 6的写在最后面*/

4 *+html与*html

*+htm l与*html是IE特有的标签, fi refox暂不支持.而*+htm l又为IE7特有标签

.browserTes t{width: 120px; } /*Fi reFox fixed */

*html .browserTest {width:80px;} /* ie6 fixed*/

*+html .browserTes t {width:60px;} /* ie7 fixed*/

3 \9专属IE8的Hack

.browserTes t{width: 120px\9; } /* IE8 fixed*/

注意:

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

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

以下是一些常用的CSS兼容技巧

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

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

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

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

5)浮动IE产生的双倍距离

在IE下 当一个div设置了float后然后给他设置margin就会出现加倍的margin解决的办法是给div设置display: inl ine。

<divid=”float”></div>

相应的css为

#float

{float: left;margin:5px;/*IE下理解为10px*/display: inl ine;/*IE下再理解为5px*/

}

Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素); Inl ine元素的特点是:和其他元素在同一行上, . . .不可控制(内嵌元素);

6)IE和FF对盒模型的解释区别

#browserTest{width:650px! i mportant;width:

648px;padding-left:2px;background:#fff; }browserTes t显示的宽度是650px

IE Box的总宽度是:width+padding+border+margin宽度总和

FF Box的总宽度就是:width的宽度 padding+border+margin的宽度在含在width内。

如果有BOX{WIDTH:"300";PADDING:"5PX";}

则B OX在I E的宽度应该为:310

而在FF的宽度则是300

所以在B OX有填充的情况下应该这样使用

BOX{WIDTH:"300" ! IMPORTANT;WIDTH:"290";}

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

8)作为外部wrapper的div不要定死高度,最好还加上overf low: hidden;以达到高度自适应;

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

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

然后CSS这样设计

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

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

10:万能flo at闭合

将以下代码加入GlobalCSS中,给需要闭合的div加上

/*Clear Fix*/

.clea rfi x:afte r

{co nte nt:".";display:block;height:0;clear:both;visibi l ity:hidden;

}

*html .clearfix{height:1%;

}

*+htm l .clea rfix{height:1%;

}

.cl e a rfi x

{display: inl ine-block;

}

/*Hidefrom IE Mac*/

.clearfix{display:block }

/*End hidefrom IE Mac*/

/*end of clearfix*/

</s tyl e>

<divid="wrap">

<h1>Float left</h1>

</div>

<h1>Float right</h1>

</div>

#wrap{borde r:6px#ccc sol id;overf low:auto;_heig ht:1%;}

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

.colum n_right{ float:right;width:75%;padding:10px;border-left:6px#eee sol id;}Hack的顺序

使用Firef ox作为平台,只要代码写得够标准,其实要H ack的地方不会很多的,IE 以外的浏览器几乎都不会有问题,所以可以暂时忽略,顺序如下:

F i re fox->I E 6->I E 7->其他

Hack的方法

说到方法有两种,一种是在不同文件中处理,另一种则是在同一个文件中处理.其实作用是相同的,只是出发点不一样而已.

1.同一文件中处理.

如: id="bgcol or"的控件要在IE6中显示蓝色, IE7中显示绿色,Firef ox等其他浏览器中显示红色.

1#bgcolor {

2 background:red ! important; /*Firefox等其他浏览器*/

3 background:blue; /*IE6 */

5*+html #bgcolor {

6 background:green ! important; /*IE7*/

IE6不认! important,也不认*+html .所以 IE6只能是blue.

IE7认! important,也认*+html ,优先度: (*+html+! important)>! important>+html . IE7可以是red, blue和green,但green 的优先度最高.

Firef ox和其他浏览器都认! im portant. ! im por tant优先,Firef ox可以是re d和blue,但red优先度高.

上述的优先符号均是CSS3标准允许的,其他浏览器也还有其他的Hack方法,但我迄今还没遇到过F i ref ox正常, I E以外的其他浏览器不正常的情况,所以无可分享.只要代码规范,相信这种情况的发生应该是很罕见(JavaS cript除外).

2.不同文件中处理.

为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器?这是为了欺骗W3C的验证工具,其实只需要两个文件,一个是针对所有浏览器的,一个只为IE服务.将所有符合W3C的代码写到一个里面去,而一些IE中必须的,又不能通过W3C验证的代码(如:cursor:hand;)放到另一个文件中,再用下面的方法导入.

1

2<link rel="stylesheet" href="style.css" type="text/css" />

3

4<!--[if IE]>

5 <link rel="stylesheet" href="style_ie.css" type="text/css" />6<! [endif]-->

浏览器的CSS Hack方法有很多,比如@import引入,>过滤等等方法,但以上就是我用过的全部.

网页前台的兼容不应该仅限于对过去的浏览器支持(向前兼容),更应该对未来的浏览器服务(向后兼容).因为浏览器的发展很快,而经常上网的人更新软件的频率是非常高的,所以向后兼容的意义甚至比先前兼容还来得重要.如何向后兼容呢?只要符合标准你的网站就永远不会过时(IE系列除外).所以我的宗旨是尽量做到标准,不得已才Hack,并尽量使用比较简单的方法去解决.

CSS hack是指我们为了兼容各浏览器而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表显示了各浏览器对css hack的支持程度对我们制作兼容网页非常有帮助。

补充

.color{background-color:#CC00FF; /*所有浏览器都会显示为紫色*/background-color:#FF0000\9; /*IE6、 IE7、 IE8会显示红色*/

*background-color:#0066FF; /*IE6、 IE7会变为蓝色*/

_background-color:#009933; /*IE6会变为绿色*/

}

好多css hack最重要的是简单实用能解决问题就行了

总结

\9 IE6IE7IE8

* IE6IE7

_ IE6

*+ IE7 经我测试没多大用

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

IE6 IE7 Firefox兼容的css hack

第一种办法body

{background:red;

*background:blue!important;(经测试在IE里不使用)

*background:green;

}

第一排给F irefo x以及其他浏览器看

第二排给IE7,IE7既能识别*号也能识别important

第三排给IE6也能识别*号

第二种办法使用_来区分IE6body

{backgrou nd:red;

*background:blue;

_background:green;

}

第一排给F irefo x以及其他浏览器看

第二排给IE7,IE7既能能识别*号

第三排给IE6能识别下划线

CSS对浏览器器的兼容性具有很高的价值通常情况下IE和Firefox存在很大的解析差异这里介绍一下兼容要点。

常见兼容问题

1.DOCTYPE影响CSS处理(但这个声明对于WEB标准的验证是非常重要的)

2.FF:div设置margin-left,margin-right为auto时已经居中, IE不行(已经

过时)

3.FF:body设置text-align时,div需要设置margin:auto(主要是margin-left,margin-right)方可居中

4.FF:设置padding后,div会增加height和width,但IE不会,故需要用!imp ortant多设一个height和width(IE也会增加没用 )

5.FF:支持!important, IE则忽略,可用!important为FF特别设置样式 IE不会忽略这谁写的没用的东西 

6.div的垂直居中问题:vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字就垂直居中了。缺点是要控制内容不要换行

7.cursor:pointer可以同时在IE FF中显示游标手指状 hand仅IE可以

8.FF:链接加边框和背景色需设置display:block,同时设置float: left保证不换行。参照menubar,给a和menubar设置高度是为了避免底边显示错位,若不设height,可以在menubar中插入一个空格。 这个没看懂 

9.在mozilla firef ox和IE中的BOX模型解释不一致导致相差2px解决方法div{margin:30px!important;margin:28px;} 这方法不使用没用用*、 -多好 

注意这两个margin的顺序一定不能写反据阿捷的说法!important这个属性IE不能识别但别的浏览器可以识别。所以在IE下其实解释成这样div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行所以不可以只写ma rg i n:XXpx!i m po rta nt;

10.I E 5和I E 6的B OX解释不一致

IE5下div{width:300px;margin:010px 010px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width/**/:340px;margin:010px 010px}关于这个/**/是什么我也不太明白只知道IE5和firefox都支持但IE6不支持如果有人理解的话请告诉我一声谢了  

11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}

就能解决大部分问题不只这一个吧还有P DL等。。 

注意事项

1、 float的d iv一定要闭合。

例如 (其中floatA、 floatB的属性已经设置为float: left;)

<#div id=”floatA”></#div>

<#div id=”floatB”></#div>

<#div id=”NOTfl oatC”></#div>

这里的N OTfloatC并不希望继续平移而是希望往下排。

这段代码在IE中毫无问题 问题出在FF。原因是N OTfloatC并非f loat标签必须将float标签闭合。

在

展开全文