本文目录

IE6的兼容问题,如何解决?比如双倍margin

🌙
手机阅读
本文目录结构

<!DOCTYPE HTML>文档类型的声明。 

产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象; 

解决办法:书写文档声明。 

2.不同浏览器当中,很多的标签的默认样式不同,如默认的外部丁内补丁。 

产生条件:不同浏览器; 

解决办法:利用CSS reset文件进行样式的清除,然后再根据需要进行设置。 

3.横向双倍外边距 

产生条件:在IE6中块元素浮动后,会出现横向双倍margin现象。 解决办法: 在float标签的样式控制中加入display:inline 

4.默认行高 

产生条件:IE6、IE7、遨游浏览器;设置的文字高度超出盒模型内容区域设置的高度。

 解决办法:给超出高度的标签设置overflow:hidden;或者将文字的行高line-height设置为小于块的高度。 

5.img外部的border 

产生条件:img外部有a标签,即img标签有链接时 解决办法:设置img边框border:0; 

6.图片默认有间距。 

产生条件:img标签(每个img之后敲了回车) 

解决办法:为img设置float的浮动布局方式。 

7.经典3像素bug 

产生条件:IE6浏览器,浮动块元素与未浮动块元素处于同一行,有默认的3px间距。 

解决办法:设置非浮动元素浮动。 

8.默认行高 

产生条件:清除浮动的时候,有些人会采取一种清浮动的方法,使用一个空的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属性设置无效 

产生条件:IE6中table设置属性border-color无效; 

解决办法:运用CSS样式进行控制,而不是使用属性进行样式的处理。 

11.png格式图片 

产生条件:IE6浏览器,不支持透明; 

解决办法:使用javascript进行处理;或者使用gif、jpg图像替代掉png图片的使用,png8的模式可以解决透明和非透明,不能解决半透明。 

12.透明rgba与opacity 

产生条件:IE6不支持此两种透明的设置方法; 

解决办法:使用IE6当中的滤镜filter替代掉,如:opacity:0.6;filter:alpha(opacity=60)。 

13.子选择器在IE6中不能使用 

产生条件:IE6浏览器,使用E>F子选择器; 

解决办法:采用其他选择器或者采用后代选择器进行控制,如:div p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。 

14.不支持最大最小宽高 

产生条件:IE6浏览器,标签的最低高度/宽度设置(min/max-height) 

解决办法:为IE6单独设置hack,即_height:最小高度值;_width:最小宽度值(对于IE6,当实际宽高超出定义的宽高时,元素会自动调整宽高)。对于最大高度和最大宽度,没有必要设置兼容,当前对于开发者来说,只需要保证IE6下正常显示即可,无需在它身上花费太多功夫。 

15.纵向居中,IE6不支持display:table-cell 

产生条件:IE6浏览器,设置一个元素在另一个元素中垂直方向上居中对齐,不能够支持以单元格的方式来显示元素; 

解决办法:如果是单行文本,采用line-height和height的配合使得文本垂直居中,如果中间是其他元素或者多行文本,采用其他方法进行居中处理,处理方法有多种。 

16.input 聚焦框颜色与样式不同 产生条件:各个浏览器表现不同; 

处理方法:使用outline:none,清除默认样式之后再统一设置。 

17.鼠标移上小手效果 

产生条件:IE6,cursor:hand :IE完全支持。但是在firefox是不支持的,没有效果。cursor:pointer :是CSS2.0的标准。所以firefox是支持的,但是IE5.0既之前版本不支持。IE6开始支持。

解决办法:设置两种cursor:pointer  cursor:hand。   18.子标签无法撑开父标签的高度 

产生条件:父标签内部含一个或多个子标签,父标签没有设置浮动,而子标签发生浮动;   处理方法:

方法1:在子标签最后添加清除浮动的设置<div style='height:0;clear:both'></div>

方法2:为父标签添加{overflow:hidden;}的样式; 

方法3:为父标签设置固定高度。 

19.li的间距问题 

产生条件:IE6浏览器 li标签设置宽高,且li里面的元素发生了浮动;

 处理方法:

方法1:li不设置宽高; 

方法2:li内部的标签不进行浮动。 

20.行内元素布局混乱 

产生条件:行内元素为包含框时,如果包含框包含的绝对定位元素以百分比为单位进行定位; 

处理方法:在行内元素当中加入{zoom:1},触发IE的hasLayout。 

21.多显示一个字 

产生条件:多个浮动元素中间夹杂HTML注释语句,浮动元素宽度设置为100%;则在下一行多显示一个上一行的最后一个字符; 

处理方法:果断删掉注释!

22.CSS优先级 !important 

产生条件:IE6当中,在同一组CSS属性中,!important不起作用; 

处理方法:单独设置。

23.img图片下部高度多余5px 

产生条件:IE6浏览器; 

处理方法:将图片转化为块级对象,即display:block。

更多面试题

如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

面试题
HTML CSS JavaScript
jQuery Vue.js React
算法 HTTP Babel
BootStrap Electron Gulp
Node.js 前端经验相关 前端综合
Webpack 微信小程序 -

这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了