文档库

最新最全的文档下载
当前位置:文档库 > IE6、_IE7、IE8、Firefox兼容性问题

IE6、_IE7、IE8、Firefox兼容性问题

IE6、IE7、IE8、Firefox兹容性问题

1.区别IE和非IE浏览器

#tip {

background:blue; /*非IE 背景藍色*/

background:red ¥9; /*IE6、IE7、IE8背景紅色*/

}

2.区别IE6,IE7,IE8,FF

【区别符号】:「\9」、「*」、「_」

【示例】:

#tip {

background:blue; /*Firefox 背景变蓝色*/

background:red ¥9; /*IE8 背景变红色*/

*background:black; /*IE7 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

【说明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就会让浏览器正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

3.区别IE6、IE7、Firefox (方法1)

【区别符号】:「*」、「_」

【示例】:

#tip {

background:blue; /*Firefox背景变蓝色*/

*background:black; /*IE7 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

【说明】:IE7和IE6可读「*」(米字号),IE6又可以读「_」(底线),但是IE7却无法读取「_」,至于Firefox(非IE浏览器) 则完全无法辨识「*」和「_」,因此就可以透过这样的差异性来区分IE6、IE7、Firefox

4.区别IE6、IE7、Firefox (方法2)

【区别符号】:「*」、「!important」

【示例】:

#tip {

background:blue; /*Firefox 背景变蓝色*/

*background:green !important; /*IE7 背景变绿色*/

*background:orange; /*IE6 背景变橘色*/

}

【说明】:IE7可以辨识「*」和「!important」,但是IE6只可以辨识「*」,却无法辨识「!important」,至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

5.区别IE7、Firefox

【区别符号】:「*」、「!important」

【示例】:

#tip {

background:blue; /*Firefox 背景变蓝色*/

*background:green !important; /*IE7 背景变绿色*/

}

【说明】:因为Firefox可以辨识「!important」但却无法辨识「*」,而IE7则可以同时看懂「*」、「!important」,因此可以两个辨识符号来区隔IE7和Firefox。

6.区别IE6、IE7 (方法1)

【区别符号】:「*」、「_」

【示例】:

#tip {

*background:black; /*IE7 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

【说明】:IE7和IE6都可以辨识「*」(米字号),但IE6可以辨识「_」(底线),IE7却无法辨识,透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。

7.区别IE6、IE7 (方法2)

【区别符号】:「!important」

【示例】:

#tip {

background:black !important; /*IE7 背景变黑色*/

background:orange; /*IE6 背景变橘色*/

}

【说明】:因为IE7可读取「!important;」但IE6却不行,而CSS的读取步骤是从上到下,因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS,所以背景色会呈现橘色。

8.区别IE6、Firefox

【区别符号】:「_」

【示例】:

#tip {

background:black; /*Firefox 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

【说明】:因为IE6可以辨识「_」(底线),但是Firefox却不行,因此可以透过这样的差异来区隔Firefox和IE6,有效达成CSS hack。

DIV+CSS相对IE6、IE7和IE8的兹容问题

来源:本站整理作者:不详日期:2010-4-14

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

CSS对浏览器的兹容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兹容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响CSS 处理,作为W3C的标准,一定要加DOCTYP

E声名.

CSS技巧

1.div的垂直居中问题

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

2. margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

例如:<#div id=”imfloat”> 相应的css为#IamFloat{float:left; margin:5px;/*IE下理解为10 px*/display:inline;/*IE下再理解为5px*/}

3.浮动ie产生的双倍距离

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

这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌

元素); #box{ display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的效果diplay:table;

4 IE与宽度和高度的问题

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

如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,

可以这样:#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: a uto; min-width: 80px; min-height: 35px;}

5.页面的最小宽度

min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个

放到 标签下,然后为div指定一个类, 然后CSS这样设计:

#container{ min-width: 600px; width:e-xpression (document.body.clientWidth < 600?

"600px": "auto" );} 第一个min-width是正常的;

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

2楼

有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;}

"box">

藏的问题。有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。

结构尽量简单。

里的NOTfloatC并不希望继续平移,而是希望往下排。

,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。

ear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套

}

er里面加上overflow:hidden; 当包含float的box的时候,高度自动适应在IE下无效,

样就达到了兹容.

x auto;}

栏的float div后面做一个统一的背景,譬如:

设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的们的page由于要居中,不能设置成float,所以我们应该这样解决

>

?

IE6、_IE7、IE8、Firefox兼容性问题

?劍曦

?3位粉丝

?

3楼

再嵌入一个float left而宽度是100%的DIV解决之

④万能float 闭合(非常重要!) 关于clear float 的原理可参见[How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上

class="clearfix" 即可,屡试不爽. /* Clear Fix */ .clearf ix:after { content:"."; display:block; height:0; clear:both; visibili ty:hidden; }

.clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac * / /* end of clearfix */

或者这样设置:.hackbox{ display:table; //将对象作为块元素级的表格显示}

11.高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign

时。

例:#box {background-color:#eee; } #box p {margin-top: 20 px;margin-bottom: 20px; text-align:center; }

p对象中的内容

解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

12 .IE6下为什么图片下有空隙产生

解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vert ical-align:top | bottom |middle |text-bottom 都可以解决.

13.如何对齐文本与文本输入框

加上vertical-align:middle;

14.web标准中定义id与class有什么区别吗

一.web标准中是不容许重复ID的,比如div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

二.属性的优先级问题ID 的优先级要高于class,看上面的例子

三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,

远远不如一个ID来得简单.

15. LI中内容超过长度后以省略号显示的方法

此方法适用与IE与OP浏览器

17.为什么无法定义1px左右高度的容器I

E6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

18.怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明

19.怎样使一个层垂直居中于浏览器中

这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

FF与IE

1. Div居中问题

div设置margin-left, margin-right 为auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: c enter;这个的意思就是在父级元素内的内容居中。

2.链接(a标签)的边框与背景

a 链接加边框和背景色,需设置display: block, 同时设置fl oat: left 保证不换行。参照menubar, 给a 和menubar 设置高度是为了避免底边显示错位, 若不设height,

可以在menubar 中插入一个空格。

3.超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A Code:

让FireFox与IE兹容 问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,

而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关

知识,请参考:http: //http://www.wendangku.net/doc/7e1cf0866294dd88d1d26b39.html/china/msdn/library/we bservices/http://www.wendangku.net/doc/7e1cf0866294dd88d1d26b39.html/ASPNETusStan.mspx?mfr=true

IE6,IE7,FF IE7.0 出来了,对CSS的支持又有新问题。浏览器多了,网页兹容性更差了,疲于奔命的还是我们,为解决IE7.0

的兹容问题,找来了下面这篇文章:现在我大部分都是用!impor tant来hack,对于ie6和firefox测试可以正常显示,但是ie7对!i mportant可以正确解释,会导致页面没按要求显示!下面是三个浏览器的兹容性收集.

?

IE6、_IE7、IE8、Firefox兼容性问题

?劍曦

?3位粉丝

?

7楼

第一种,是CSS HACK的方法height:20px; /*For Firefox* / *height:25px; /*For IE7 & IE6*/ _height:20px; /*For IE 6*/ 注意顺序。这样也属于CSS HACK,不过没有上面这样简洁。#example { color: #333; } /* Moz */ * html #e xample { color: #666; } /* IE6 */ *+html #example { colo r: #999; } /* IE7 */

>

第三种,css filter的办法,以下为经典从国外网站翻译过来的。. 新建一个css样式如下:#item { width: 200p x; height: 200px; background: red; } 新建一个div,并使用前面定义的css的样式:

some text here
在body表现这里加入lang属性,中文为zh: 现在对div元素再定义一个样式:*:lang(en) #it em{ background:green !important; } 这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:#item:empty { background: green !important } : empty选择器为css3的规范,尽管safari并不支持此规范,但是还

是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie

各版本以外的浏览器上。对IE6和FF的兹容可以考虑以前的!i

mportant 个人比较喜欢用

可以发现,在ie7下,元素使用了text-align: center;后,里面的div和文字都居中了,

而在ie8下,元素内的文字居中了,但是里面的div元素没有居中。

这种不平衡的方法有两中解决方法。

1是让ie7趋向ie8,就是让ie7下也显示成ie8的效果,元素居左。方法是在里面的元素上加上float:left;就可以了

2是让ie8趋向ie7,就是让ie8下也显示成ie7的效果,元素居中。方法是在里面的元素上加上margin: 0 auto;就可以了。