DIV+CSS解决IE6，IE7，IE8，FF兼容问题

时间 2019-12-20

标签 div+css div css 解决 ie6 ie7 ie8 兼容问题栏目 HTML 繁體版

原文原文链接

1.IE8下兼容问题，这个最好处理，转化成IE7兼容就能够。在头部加以下一段代码，而后只要在IE7下兼容了，IE8下面也就兼容了：
1. <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/>
2.
2.flaot浮动形成IE6下面双倍边距问题，这个最多见，也最好处理，!important解决，好比
margin-left:10px!important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10px
3. 清除块display，这个能够解决浮动形成的块，形成块后，当DIV背景填色或填图片的时候，会出现背景断开或差一小块。这种兼容出现的不太多，我作到如今，只遇到过两次，方法是在出现兼容的DIV的CSS中写一个display:block，或其它属性，中文什么意思我不知道，我英语差，但能达到想要的效果，6e"Z+e%|8G#|
4.不少朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好了，可是在FF出问题了，用!important又会把IE7作的不兼容，很头疼，在想，有没有什么方法只对FF下进行操作，我用过这个方法，感受得是百试不爽，就是在属性前面加符号如：*、&，￥，#，@，—，+，加过符号的属性只有IE的浏览器才识别，而FF不识别，方法以下(注意有符号的属性和没符号的属性的顺序)
height:100px;/*FF下显示100的高*/
+height:120px;/*IE678下显示120高*/
5.有时候，会在布局的时候，发现，有一个DIV浮动了，接下来的一个DIV原本是要在下面显示的，结果跑上面去了，这种状况通常在FF下面会出现，解决的办法就是清除一下浮动，在设置过浮动的那个DIV下面加一个DIV，CSS面写个clear:both;以下
1. <divstyledivstyle="float:left;height:100px;width:500px;">
2. <divstyledivstyle="clear:both;">
3. <divstyledivstyle="height:100px;width=300px">
6.再就是居中问题，这个问题在新手身上不少，主要缘由是对盒子模型不够理解，没熟记盒子模型，若是发现你的页面没有局中，我如今知道的，有这几个缘由：
1.一个是没盒子，就是BODY后的一个大DIV把全部DIV装起来的那个，你没写。
2.就是你写了，可是宽度没用绝对宽度：而是用一个相对的宽度，想局中，必须用绝对宽度。-
7.扩展：若是我想在设计的时候，实现IE6，IE7,FF下出现三种不一样的效果，好比IE6下背景红色，IE7下蓝色FF下绿色，这里，我本身试过，能够，用兼容的方法（注意顺序，能够好好理解一下）。
7L&t-o7k-a1I
background:red;/*FF里显示的红色*/
+background:blue!important;/*IE7下面显示的蓝色*/
+background:green;/*IE6下面显示的绿色*/

IE6 IE7 IE8 FF浏览器的CSS兼容问题
IE六、IE七、IE八、FF浏览器的CSS兼容问题，原本IE6跟ff之间的兼容是很容易解决的。加上个IE7会麻烦点，IE8的出现就更头疼了，原来hackIE7的方法又不能用了，怎么办呢？
还好，微软提供了这样一个代码：

1. <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/>
把这段代码放到<head>里面，在IE8里面的页面解析起来就跟IE7如出一辙的了，因此，基本上能够无视IE8，剩下的代码只须要这样写就能够了
1. background:#ffc;/*对firefox有效*/
2. *background:#ccc;/*对IE7有效*/
3. _background:#000;/*只对IE6有效*/
解释一下吧：
◆firefox能解析第一段，后面的两个由于前面加了特殊符号“*”和“_”,firefox认不了，因此只认background:#ffc，看到的是黄色；
◆IE7前两短都能认，以最后的为准，因此最后解析是background:#ccc，看到的是灰色；
◆IE6三段都能认，并且“_”这个只有IE6能认，因此最后解析是_background:#000，看到的是黑色
已是最简单和最好理解的写法了，若是你是google进来的，我能够很负责任的告诉你，这种方法是ok的，我测试过。
◆IE8的那段兼容7的代码我也测试过了，在我如今的windos7测试版所带的IE8是没问题的，之后IE8正式版出来还管无论用就不知道了。
ps：若是你发现按我这样写仍是有问题的话，请查看一下你的html头，看看<head>以前的内容是否是这样的标准写法

1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
2.
3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
这个是如今比较规范的写法，若是你是用dreamweaver作页面的话，默认也是这种规范的，切记，非这种规范写法的，兼容性不能保证。

解决IE六、IE七、Firefox兼容最简单的CSSHack
很早就在这里看到过解决方案，最后发现这个方案仍是很可靠的。固然，惟一的缺点就是每个属性都要去Hack，但我在不少实践中，只用‘修正’1-2个属性就能够了。
具体写法很容易：
1. #someNode
2. {
3. position:fixed;
4. #position:fixed;
5. _position:fixed;
6. }
第一排给Firefox以及其余浏览器看
第二排给IE7（可能之后的IE八、IE9也是如此，谁知道呢）看
第三排给IE6以及更老的版本看
最好的应用就是可让IE6也“支持”position:fixed，并且，配合这个原理，能够作到不引入JavaScript代码（仅用IE6的expression），我这里有一个现成的页面，CSS以下写：
1. #ff-r
2. {
3. position:fixed;
4. _position:absolute;
5. right:15px;
6. top:15px;
7. _top:expression(eval(document.compatMode&&
8. document.compatMode=='CSS1Compat')?
9. documentElement.scrollTop+15:
10. document.body.scrollTop+
11. (document.body.clientHeight
12. -this.clientHeight));
13. }

Css代码
1. <style type=”text/css”>
2. #body {
3. border:2px solid #00f; /*ff的属性*/
4. border:2px solid #090\9; /* IE6/7/8的属性 */
5. border:2px solid #F90\0; /* IE8支持 */
6. _border:2px solid #f00; /*IE6的属性*/
7. }
8. </style>

Html代码
1. <div id=”body”>
2. <ul>
3. <li>FF下蓝边</li>
4. <li>IE6下红边</li>
5. <li>IE7下绿边</li>
6. <li>IE8下黄边</li>
7. </ul>
8. </div>

注:css顺序不能写错，由于ff不认识\9,\0,_写法,因此为蓝边;\9是IE6，7，8的属性,下面代码并无重写IE7的代码，因此IE7下绿边;同理,\0为ie8属性，至关于重写了颜色，因此IE8下为黄边,_是ie6的属性,重写颜色为红边.

div错位/解决IE六、IE七、IE8样式不兼容问题
IE6里DIV错位的问题

采用”FLOAT：LEFT“的DIV在IE八、IE七、都没问题，IE6下却向下移动，出现空白。这是由于，IE6采用的内核默认把DIV之间的距离增长了3~5个PX，因此，试试是将下移的DIV的STYLE里增长"margin-left:-5px;"或者更小。
解决IE七、IE8样式不兼容问题

方法1、要在页面中加入以下HTTP meta-tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

只要IE8一读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展现。

方法2、针对整个网站，在IIS中加入以下描述符就能够有相同的效果，固然这么作范围更广。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=EmulateIE7">
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>

解决IE六、IE七、IE8样式不兼容问题

如今咱们在作网页的时刻老是要考虑一些浏览器之间的兼容问题。近期在作一个短信平台的项目。在项目的开发过程当中让我遇到了一件头痛的事情就是IE7与IE8不兼容。后面想了许多办法得以解决。现共享以下：

若是你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅须要在目前兼容IE7的网站上添加一行代码便可解决问题，此代码以下：

CODE:

<meta http-equiv="x-ua-compatible" content="ie=7" />

解决firefox ie6 ie7的css样式兼容问题

作主题最麻烦的就是CSS样式兼容问题，因为各浏览器对ccs的不一样解释，形成原本IE7可正常显示，但到了Firefox 、ie6等其它浏览器上，却出现错位、下沉等问题，只得在Firefox 、ie6 、ie7之间不停的切换调试，汗…最近又有两款浏览器加入googleChrome和IE8,某个浏览器一统天下看来是没但愿了，只能尽可能克服兼容问题。找到一篇解决兼容问题的文章，仍是颇有效的。

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-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经能够了。

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

须要说明的是，若是你想用这个方法使整个页面要居中，建议不要套在一个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; //使浮动忽略}

这里细说一下block,inline两个元素,Block元素的特色是:老是在新行上开始,高度,宽度,行高,边距均可以控制(块元素);Inline元素的特色是:和其余元素在同一行上,…不可控制(内嵌元素);

#box{ display:block; //能够为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 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:e¬xpression(document.body.clientWidth < 600? “600px”: “auto” );

}

第一个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:-3px;

//这句是关键

}

HTML代码

<DIV id=box>

<DIV id=left></DIV>

<DIV id=right></DIV>

</DIV>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

p[id]{}div[id]{}

这个对于IE6.0和IE6.0如下的版本都隐藏,FF和OPera做用

属性选择器和子选择器仍是有区别的,子选择器的范围从形式来讲缩小了,属性选择器的范围比较大,如p[id]中,全部p标签中有id的都是一样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每一个栏中又有一些连接，DIV等这个时候容易发生捉迷藏的问题。

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

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽可能简单。

11 高度不适应

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

margin 或paddign 时。例：

<div id=”box”>

<p>p对象中的内容</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属性。

注：IE都能识别*;标准浏览器(如FF)不能识别*；

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

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

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

1.区别IE和非IE浏览器
#tip {
background:blue; /*非IE 背景藍色*/
background:red \9; /*IE六、IE七、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.区别IE六、IE七、Firefox (方法 1)
【区别符号】：「*」、「_」
【示例】：
#tip {
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：IE7和IE6可读「*」(米字号)，IE6又能够读「_」(底线)，可是IE7却没法读取「_」，至于Firefox(非IE浏览器)则彻底没法辨识「*」和「_」，所以就能够透过这样的差别性来区分IE六、IE七、Firefox

4.区别IE六、IE七、Firefox (方法 2)
【区别符号】：「*」、「!important」
【示例】：
#tip {
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
*background:orange; /*IE6 背景变橘色*/
}
【说明】：IE7能够辨识「*」和「!important」，可是IE6只能够辨识「*」，却没法辨识「!important」，至于Firefox能够读取「!important」但不能辨识「*」所以能够透过这样的差别来有效区隔IE六、IE七、Firefox。

5.区别IE七、Firefox
【区别符号】：「*」、「!important」
【示例】：
#tip {
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
}
【说明】：由于Firefox能够辨识「!important」但却没法辨识「*」，而IE7则能够同时看懂「*」、「!important」，所以能够两个辨识符号来区隔IE7和Firefox。

6.区别IE六、IE7 (方法 1)
【区别符号】：「*」、「_」
【示例】：
#tip {
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：IE7和IE6均可以辨识「*」(米字号)，但IE6能够辨识「_」(底线)，IE7却没法辨识，透过IE7没法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差别。

7.区别IE六、IE7 (方法 2)
【区别符号】：「!important」
【示例】：
#tip {
background:black !important; /*IE7 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
}
【说明】：由于IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，所以IE6读取时因没法辨识「!important」而直接跳到下一行读取CSS，因此背景色会呈现橘色。

8.区别IE六、Firefox
【区别符号】：「_」
【示例】：
#tip {
background:black; /*Firefox 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：由于IE6能够辨识「_」(底线)，可是Firefox却不行，所以能够透过这样的差别来区隔Firefox和IE6，有效达成CSS hack。css