ie兼容 · 小白学电脑

新手可能会遇到一些兼容问题。放在这里供大家参考。 DIV+CSS解决IE6，IE7，IE8，FF兼容问题 1.IE8下兼容问题，这个最好处理，转化成IE7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了： 1. "<"metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/">" 2.float浮动造成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. "<"div styledivstyle="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兼容问题 IE6、IE7、IE8、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做页面的话，默认也是这种规范的，切记，非这种规范写法的，兼容性不能保证。解决IE6、IE7、Firefox兼容最简单的CSSHack 很早就在这里看到过解决方案，最后发现这个方案还是很可靠的。当然，唯一的缺点就是每一个属性都要去Hack，但我在很多实践中，只用‘修正’1-2个属性就可以了。具体写法很容易： > 1. \#someNode > 2. { > 3. position:fixed; > 4. \#position:fixed; > 5. _position:fixed; > 6. } 第一排给Firefox以及其他浏览器看第二排给IE7（可能以后的IE8、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错位/解决IE6、IE7、IE8样式不兼容问题 IE6里DIV错位的问题采用”FLOAT：LEFT“的DIV在IE8、IE7、都没问题，IE6下却向下移动，出现空白。这是因为，IE6采用的内核默认把DIV之间的距离增加了3~5个PX，所以，试试是将下移的DIV的STYLE里增加"margin-left:-5px;"或者更小。解决IE7、IE8样式不兼容问题方法一、要在页面中加入如下HTTP meta-tag: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 只要IE8一读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展示。方法二、针对整个网站，在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> 解决IE6、IE7、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; /*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。