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下高度超出出现多余空白”

ie6常见的兼容性问题的更多相关文章

ie6常见的兼容性
1.IE6怪异解析之padding与border算入宽高原因:未加文档声明造成非盒模型解析解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...
IE6 7下常见CSS兼容性处理
以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...
ie6对hover兼容性问题的解决：
ie6对hover兼容性问题的解决: 1,在body里添加以下样式: behavior:url(../scripts/csshover.htc); csshover.htc可直接在网上下载 2,js解 ...
IE6常见bug整理
By Diaoyude | 发布时间: 09-08 09:47 | Hits:1,253 | Post in: WEB前端 , Div-Css 针对IE6常见的一些ie6bug,ie6png,E6 ...
IE6常见CSS解析Bug及hack
IE6常见CSS兼容问题总结 1)图片间隙 A)div中的图片间隙(该bug出现在IE6及更低版本中) 描述:在div中插入图片时,图片会将div下方撑大三像素. hack1:将</div> ...
HTML-IE6兼容性问题及IE6常见BUG详细汇总
点评:IE6的兼容性问题一直都是前端工程师的恶梦,为了早早脱离这种困境,本文整理了一些相关兼容性的知识,感兴趣的朋友可以参考下哈,希望可以帮助到你- 1.终极方法:条件注释 <!--[if lt ...
IE6兼容性问题及IE6常见bug详细汇总
转载地址:http://www.jb51.net/css/76894.html 1.IE6怪异解析之padding与border算入宽高原因:未加文档声明造成非盒模型解析解决方法:加入文档声明&l ...
IE6兼容性问题及IE6常见bug详细汇总－－－转载
1.IE6怪异解析之padding与border算入宽高原因:未加文档声明造成非盒模型解析解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...
CSS在IE6中常见的兼容性问题
1.在IE6中png24格式的图片不透明解决办法:写一个条件注释语句,引入一个js插件,然后调用一下js中的方法,把需要处理的元素的类名写在括号中,如下 (插件下载地址:http://www.dil ...

随机推荐

redis 删除大key集合的方法
redis大key,这里指的是大的集合数据类型,如(set/hash/list/sorted set),一个key包含很多元素.由于redis是单线程,在删除大key(千万级别的set集合)的时候,或 ...
Xamarin.Android 启动页
打开软件的时候相当慢,会有白屏显示,这样的用户体验效果不好,所以需要增加一个启动页来过渡.步骤如下: 第一步:根据自己需求找到一个png图片,用于启动展示,放在Drawable 文件夹下,我这里命名为 ...
Elasticsearch从入门到精通-Elasticsearch是什么
作者其他ELK快速入门系列文章 logstash快速入门实战指南 Kibana从入门到精通一.前言驱动未来商业发展的最重要“能源”不是石油,而是数据.我们还来不及了解它,这个世界已经被它淹没.多年 ...
Tomcat8源码笔记(九)组件StandardContext启动流程--未完待续
StandardContext代表的是webapps下项目,一个项目就是一个StandardContext,作为Tomcat组件的一部分,就会实现Lifecycle接口,被Tomcat管理着生命周期, ...
利用redis实现分布式锁
分布式锁一般有三种实现方式: 1. 数据库乐观锁: 2. 基于ZooKeeper的分布式锁: 3. 基于Redis的分布式锁: 这里大概说一下三种方式的优缺点,数据库乐观锁优点是实现简单,只需要for ...
Python爬虫的N种姿势
问题的由来前几天,在微信公众号(Python爬虫及算法)上有个人问了笔者一个问题,如何利用爬虫来实现如下的需求,需要爬取的网页如下(网址为:https://www.wikidata.org/w/ ...
[转]调整 VirtualBox 虚拟机的磁盘大小
本文转自:https://cnzhx.net/blog/resizing-lvm-centos-virtualbox-guest/ 发表于 2013-08-20 作者 H Zeng 更新于 2016- ...
c# 怎么读取web.config中的配置项
ConfigurationManager.AppSettings["templateId"]
WPF，强制捕获鼠标事件，鼠标移出控件外依然可以执行强制捕获的鼠标事件
在WPF中,只有鼠标位置在某个控件上的时候才会触发该控件的鼠标事件.例如,有两个控件都注册了MouseDown和MouseUp事件,在控件1上按下鼠标,不要放开,移动到控件2上再放开.在这个过程中,控 ...
C# 从Excel中读取条码
条形码的应用三------从Excel文件中读取条形码介绍上一篇文章,我向大家展示了生成多个条形码并存储到Excel文件中的一个方法.后来我又有了个想法:既然条码插入到excel中了,我可不可以从 ...

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）

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下 高度超出 出现多余空白”

ie6常见的兼容性问题的更多相关文章

随机推荐

热门专题

解决办法：在float标签的样式控制中加入display：inline

处理方法：方法1：在子标签最后添加清除浮动的设置<div style='height:0;clear:both'></div>; 方法2：为父标签添加{overflow:hidden;}的样式；方法3：为父标签设置固定高度。

处理方法：方法1：li不设置宽高；方法2：li内部的标签不进行浮动。

22.CSS优先级！important

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