ie6兼容问题及其解决办法

《ie6兼容问题及其解决办法》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、1.文档类型的声明。产生条件：IE6浏览器，当我们没有书写这个文档声明的时候，会触发IE6浏览器的怪异解析现象；解决办法：书写文档声明。2.不同浏览器当中，很多的标签的默认样式不同，如默认的外部丁内补丁。产生条件：不同浏览器；解决办法：利用CSSreset文件进行样式的清除，然后再根据需要进行设置。3.横向双倍外边距产生条件：在IE6中块元素浮动后，会出现横向双倍margin现象。解决办法：在float标签的样式控制中加入display：inline4.默认行高产生条件：IE6、IE7、遨游浏览器；设置的文字高度超出盒模型内容区域

2、设置的高度。解决办法：给超出高度的标签设置overflow：hidden；或者将文字的行高line-height设置为小于块的高度。5.img外部的border产生条件：img外部有a标签，即img标签有链接时解决办法：设置img边框border:0;6.图片默认有间距。产生条件：img标签（每个img之后敲了回车）解决办法：为img设置float的浮动布局方式。7.经典3像素bug产生条件：IE6浏览器，浮动块元素与未浮动块元素处于同一行，有默认的3px间距。解决办法：设置非浮动元素浮动。8.默认行高产生条件：清除浮动的时候，有些人会采取一种清浮动的方法，

3、使用一个空的div，然后为这个div设置{clear：both}。在大部分浏览器当中，这样做是没有任何问题的，但是在IE6浏览器当中，div即使是空的，也会存在默认行高。解决办法：设置其高度为0，并设置overflow:hidden。{height:0;overflow:hidden;clear:both;}9.a标签hover不适用于所有标签产生条件：IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用；解决办法：合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果。10.table标签当中border-color属性

4、设置无效产生条件：IE6中table设置属性border-color无效；解决办法：运用CSS样式进行控制，而不是使用属性进行样式的处理。11.png格式图片产生条件：IE6浏览器，不支持透明；解决办法：使用javascript进行处理；或者使用gif、jpg图像替代掉png图片的使用。12.透明rgba与opacity产生条件：IE6不支持此两种透明的设置方法；解决办法：使用IE6当中的滤镜filter替代掉，如：opacity:0.6;filter:alpha(opacity=60)。13.子选择器在IE6中不能使用产生条件：IE6浏览器，使用E>F子选

5、择器；解决办法：采用其他选择器或者采用后代选择器进行控制，如：divp{margin:10px;}divpp{margin:0;}替代掉div>p{margin:10px;}。14.不支持最大最小宽高产生条件：IE6浏览器，标签的最低高度/宽度设置（min/max-height）解决办法：为IE6单独设置hack，即_height:最小高度值；_width：最小宽度值（对于IE6，当实际宽高超出定义的宽高时，元素会自动调整宽高）。对于最大高度和最大宽度，没有必要设置兼容，当前对于开发者来说，只需要保证IE6下正常显示即可，无需在它身上花费太多功夫。15.纵向

6、居中，IE6不支持display:table-cell产生条件：IE6浏览器，设置一个元素在另一个元素中垂直方向上居中对齐，不能够支持以单元格的方式来显示元素；解决办法：如果是单行文本，采用line-height和height的配合使得文本垂直居中，如果中间是其他元素或者多行文本，采用其他方法进行居中处理，处理方法有多种。16.input聚焦框颜色与样式不同产生条件：各个浏览器表现不同；处理方法：使用outline:none，清除默认样式之后再统一设置。17.鼠标移上小手效果产生条件：IE6，cursor:hand：IE完全支持。但是在firefox是不支持

7、的，没有效果。cursor:pointer：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。；解决办法：设置两种cursor:pointer;cursor:hand。18.子标签无法撑开父标签的高度产生条件：父标签内部含一个或多个子标签，父标签没有设置浮动，而子标签发生浮动；处理方法：方法1：在子标签最后添加清除浮动的设置