综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不面对的工作。
在此总结了常见的浏览器兼容问题,里面也有IE6的常见兼容问题,供大家分享。
 
 
 

1.<!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效果;详情请查看日志:兼容IE6 a标签hover效果

10.table标签当中border-color属性设置无效

产生条件: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子选择器;

解决办法:采用其他选择器或者采用后代选择器进行控制,如: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的配合使得文本垂直居中,如果中间是其他元素或者多行文本,采用其他方法进行居中处理,处理方法有多种,详见日志:CSS元素水平垂直居中。

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。关于hasLayout的更多介绍请参见日志:hasLayout IE浏览器bug的来源。

21.多显示一个字

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

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

22.CSS优先级 !important

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

处理方法:单独设置。

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

产生条件:IE6浏览器;

处理方法:将图片转化为块级对象,即display:block。还有四种其他方法,详细解释参见日志:“IE6 BUG 图片元素img下 高度超出 出现多余空白”

 
 
以上为转载地址为:http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201371611543769/

转载于:https://www.cnblogs.com/carrie-hong/p/4996545.html

【转】IE6 浏览器常见兼容问题 大汇总(23个)相关推荐

  1. IE6 浏览器常见兼容问题 大汇总

    以下全文载自独行冰海 IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程 ...

  2. PS常用工具、常见的图片格式和特点、 IE 浏览器常见兼容问题、CSS Hack

    PS常用工具常见的图片格式和特点. IE 浏览器常见兼容问题.CSS Hack PS常用工具 移动工具 移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具 快捷键:h 空格 + 鼠 ...

  3. Ie6 Ie7 常见 兼容问题解决方案

    下面是14条特殊情况你看一下是哪个问题出错了这些仅供参考: 1. 文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3 ...

  4. 47种常见的浏览器兼容性问题大汇总

    浏览器兼容性问题大汇总 Ø JavaScript 3 1. HTML对象获取问题 3 2. const问题 3 3. event.x与event.y问题 3 4. window.location.hr ...

  5. 常见的浏览器兼容性问题大汇总

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  6. (转载)浏览器兼容性问题大汇总

    浏览器兼容性问题大汇总 Ø JavaScript 3 1. HTML对象获取问题 3 2. const问题 3 3. event.x与event.y问题 3 4. window.location.hr ...

  7. IE6,IE7,FF等浏览器不兼容原因及解决办法(转)

    IE6,IE7,FF等浏览器不兼容原因及解决办法 2008-07-15 11:26 本文转载,作者:阿里巴巴前端开发,发到这里只是方便以后查看,也给各位需要的朋友. 浏览器的不兼容,大家肯定都是深恶痛 ...

  8. 批量打开网站链接工具,兼容各大浏览器,用户体验良好

    介绍一个批量打开网站链接的工具,兼容各大浏览器,在用户体验上升级,实现更加良好简单的使用,为各位有需求的大大提供了方便性 在线工具地址:https://www.lmcjl.com/index/grab ...

  9. 大数据常见运维问题汇总

    大数据常见运维问题汇总 其他安装问题: 1.IDEA安装与配置 IntelliJ IDEA使用教程 (总目录篇)_请叫我大师兄-CSDN博客_intellijidea使用教程 2.IntelliJ I ...

  10. html定位 浏览器兼容,IE6浏览器不支持固定定位(position:fixed)解决方案

    今天在学习的时候,突然发现在IE6浏览器下,position:fixed不管用了: 复制代码代码如下: New Document 正常普通流元素 position:fixed元素 上面的代码在IE6中 ...

最新文章

  1. 001_日志系统的架构模型
  2. python无法打印unicode编码_【整理】Python中实际上已经得到了正确的Unicode或某种编码的字符,但是看起来或打印出来却是乱码...
  3. 线程调度 java_Java多线程--线程的调度
  4. python爬虫为什么xpath路径正确却检索不到内容_中国知网爬虫
  5. 【译】Why Decentralized AI Matters Part II: Technological Enablers
  6. jdbc连接数据scanip_java数据库连接_jdbc
  7. python爬取大众点评_浅谈python爬取58同城,大众点评这两个网站
  8. 具有IOctl的简单字符驱动
  9. MySQL-locate()函数
  10. c++ 字符串合并_Python基础字符串处理
  11. JavaScript截断/切片/修剪掉字符串中的最后一个字符
  12. Windows Phone 7 Tips (6)
  13. Oracle自增ID实现
  14. Win7+vmware+xpsp3+vs2010驱动开发环境搭建及调试方法
  15. JAVA毕设项目汽车租赁管理系统(java+VUE+Mybatis+Maven+Mysql)
  16. 微信小程序 内容评论-回复评论-回复回复的实现
  17. 前端根据后端数据生成表格 行列合并 指定表头
  18. 查询央行征信的APP有哪些?
  19. 【PART 1】OAK-D+TurtleBot3机器人项目全解析:SLAM、ROS、深度图、点云。
  20. 微信公众h5页面如何在pc端调试

热门文章

  1. linux 自动化安装系统,Linux-运维之半自动化安装系统
  2. 【渝粤题库】国家开放大学2021春2779植物病虫害防治基础题目
  3. 最小生成树的普里姆算法c实现
  4. 【NeurIPS 2019】最大熵的蒙特卡洛规划算法
  5. 手把手教你强化学习 (七) 强化学习中的无模型控制
  6. 随手练——O(n)解决无序数组排序后的相邻最大差值
  7. [转]介绍几个C#正则表达式工具
  8. 暑期集训20190727 水(water)
  9. 必做作业三:原型化系统-社区分享app
  10. 【C++标准库】字符串