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

最新推荐文章于 2020-11-20 13:46:51 发布

一喵呜

最新推荐文章于 2020-11-20 13:46:51 发布

阅读量4.3k

点赞数 1

分类专栏： IE6 Bug HTMl5 HTML5自由者文章标签： HTML5自由者黄艺斌 IE6 BUG 独行冰海 IE浏览器兼容问题

HTML5自由者同时被 3 个专栏收录

94 篇文章

订阅专栏

HTMl5

81 篇文章

订阅专栏

IE6 Bug

9 篇文章

订阅专栏

以下全文载自独行冰海

IE6以及各个浏览器常见兼容问题大汇总

综述：虽然说IE6在2014年4月将被停止支持，但是不得不说的是，IE6的市场并不会随着支持的停止而立刻消散下去，对于WEB前端开发工程师来说，兼容IE6 兼容各个浏览器，依然是不得不面对的工作。

在此总结了常见的浏览器兼容问题，里面也有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下高度超出出现多余空白”

IE6 BUG 图片元素img下高度超出出现多余空白

1、将图片转换为块级对象

即，设置img为“display:block;”。

2、设置图片的垂直对齐方式

即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。

3、设置父对象的文字大小为0px

即，在代码中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

4、改变父对象的属性

如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。

5、设置图片的浮动属性

即在本例中增加一行CSS代码： img {float:left;}”。如果要实现图文混排，这种方法是很好的选择。

input 标签(file类型)在IE和FF里的兼容问题

IE，永远都是那么不同……那么特立独行…………

file类型的input标签在IE浏览器以及火狐（FF）浏览器当中，存在着兼容问题，对于宽度的设置，使用的语法并不相同，具体区别如下代码：

在IE里，浏览器以style中的设置的width控制整个标签的宽度。

在FF里，浏览器以size中的数值控制整个标签的宽度。

注：示例代码中的数值在IE6和FF3中，显示的宽度是相同的。

IE6中li列表项之间增加空行BUG

不知道大家是否遇到过这样的事情，FF中正常，在IE6中Li列表项之间增加空行。如果出现了这样的问题我们怎么解决呢？

1、HTML代码：

     <ul>
      <li><a href="#">IE6中li列表项之间增加空行BUG</a></li>
      <li><a href="#">IE6中li列表项之间增加空行BUG</a></li>
      <li><a href="#">IE6中li列表项之间增加空行BUG</a></li>
    </ul>

2、CSS代码：

    * {padding:0;margin:0;}
    li { }
    li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;}
    li a:hover {background:#BBB;}

IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。

解决方案1（推荐）：就是在li a 样式中加入width:100%或者一个宽度值；

    * {padding:0;margin:0;}
    li {  }
    li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block; width:100% }
    li a:hover {background:#BBB;}

解决方案2：就是在li a 样式中加入zoom:1；

    * {padding:0;margin:0;}
    li { }
    li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;zoom:1}
    li a:hover {background:#BBB;}

解决方案3：就是在li 样式中加入display:inline ；

    * {padding:0;margin:0;}
    li { display:inline }
    li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;}
    li a:hover {background:#BBB;}

解决方法4（不推荐）：就是将<li>标签写成一行。

hasLayout IE浏览器bug的来源

hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的后代元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

默认 hasLayout=true 的标签：

很多情况下，把 hasLayout的状态改成true 可以解决很大部分ie下显示的bug。 hasLayout属性不能直接设定，通过设定一些特定的css属性来触发并改变 hasLayout 状态。

元素hasLayout而导致的问题其实一般都很容易发现：往往是内容出现错位甚至完全不可见。

如：当一个元素内含浮动或绝对定位的内容时，它通常会表现出奇怪和错误的行为

一般如果是因为layout而引起的显示不符期望效果的话，在ff下会表现正常，而在ie下会出现错误。这个时候可以尝试触发父容器及其中的子容器的haslayout属性，通常可以通过加上zoom: 1;来调试。直到找到了产生问题的元素，再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。但是，有时不便指定尺寸属性的情况下，就只能寻找替代方案了。对于ie7 ，最好的办法是设置最小高度属性为0；这个技术是无害的，因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%，然后对其他浏览器隐藏这个设置。这种技术就是著名的Holly hack。

display

启动haslayout的值:inline-block

取消hasLayout的值:其他值

width/height

启动hasLayout的值：除了auto以外的值

取消hasLayout的值：auto

position

启动hasLayout的值：absolute

取消hasLayout的值：static

float

启动hasLayout的值：left或right

取消hasLayout的值：none

zoom

启动hasLayout的值：有值

取消hasLayout的值：narmal或者空值

（zoom是微软IE专有属性，可以触发hasLayout但不会影响页面的显示效果。zoom: 1常用来除错， ie 5不支持。）

ie7还有一些额外的属性可以触发该属性（不完全列表）：

min-height: (任何值)

max-height: (任何值除了none)

min-width: (任何值)

max-width: (任何值除了none)

overflow: (任何值除了visible)

overflow-x: (任何值除了visible)

overflow-y: (任何值除了visible)

兼容IE6a标签hover特殊效果

<!DOCYTPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>测试1</title>
	<style>
	*{
		margin: 0px;
		padding: 0px;
		list-style: none;
	}
	ul{
		margin: 20px auto;
		width: 350px;
		height: 270px;
		background: #fcc;
	}
	h3{
		display: inline;
	}
	a{
		float: left;
		width: 350px;
		height: 35px;
		margin-bottom: 5px;
		background: red;
	}
	a:hover{
		background: yellow;
		zoom:1;
		height:60px;
	}
	a:hover b,a:hover h3,a:hover span{
		display: none;
	}
	</style>
</head>
<body>
	<ul>
		<li><a href=""><h3>尹小芃呆呆</h3><span>世说新语</span></a></li>
		<li><a href=""><h3>尹小芃呆呆</h3><span>世说新语</span></a></li>
		<li><a href=""><h3>尹小芃呆呆</h3><span>世说新语</span></a></li>
		<li><a href=""><h3>尹小芃呆呆</h3><span>世说新语</span></a></li>
		<li><a href=""><h3>尹小芃呆呆</h3><span>世说新语</span></a></li>
		<li><a href=""><h3>尹小芃呆呆</h3><span>世说新语</span></a></li>
	</ul>
</body>
</html>

原效果
鼠标放上去的效果

a{float:left}将a标签转化成块元素，这样可以设置宽和高。

a:hover b{}当鼠标放在a标签上时，只是将a标签的b的内容隐藏掉，而不是将a隐藏掉。如果将a标签隐藏掉的，hover效果将消失，

IE6 BUG 图片元素img下高度超出出现多余空白

1、将图片转换为块级对象

即，设置img为“display:block;”。

2、设置图片的垂直对齐方式

即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。

3、设置父对象的文字大小为0px

4、改变父对象的属性

如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。

5、设置图片的浮动属性

即在本例中增加一行CSS代码： img {float:left;}”。如果要实现图文混排，这种方法是很好的选择。

IE6下左浮动元素margin-bottom失效 bug

在 IE6 IE7 IE8(Q)中，容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的 'margin-bottom' 消失；

在其他浏览器中，容器的 'overflow:hidden' 创建了新的 Block Formatting Context ，同样，其内部浮动子元素也参与到了容器的高度计算之中。浮动子元素的四个方向的 margin 均正常。

例子：第一个div子元素设置了底部的margin值，在清除浮动之后无效

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动元素的影响-独行冰海</title>
<style>
*{margin: 0;padding: 0;}
.con-float-box{
width: 600px;
border: 1px solid #f00;
}
.con-float-box div{
float: left;
width: 198px;
height: 98px;
margin: 20px 0;
border: 1px solid #00f;
}
.box-pos{
width: 600px;
height: 100px;
margin-top: 10px;
border: 1px solid #000;
background: #ccf;
}
.clearfix:before,.clearfix:after {
content: "\200B";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
</style>
</head>
<body>
<div class='con-float-box clearfix'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div class='box-pos'>为第一个div设置了清除浮动的类clearfix，进行了相应的处理，此时，在谷歌浏览器当中正常，但是在IE6，依旧不正常，第7和第8个块底部的margin没有生效。</div>
</body>
</html>

解决方案

为容器显式地设置高度。若容器高度不定，则要避免在触发了 hasLayout 的容器内的浮动子元素上设置 'margin-bottom' 特性，可以通过为容器设置 'padding-bottom' 达到相似的效果。

只要不同时触发父元素hasLayout、子元素左浮动、左浮动子元素拥有非零的 margin-bottom 值，这三个条件中任意一项，均可解决此问题。

变态的inline-block带来的bug

span之间的空隙，到底是什么？

display:inline-block的元素虽然能够处于同一行，但是很变态的是它们之间出现了空格，如何处理？（例如在浮动元素居中当中，我们必须使用display:inline-block）

实例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>内敛元素的间隙-独行冰海</title>
<style>
*{margin: 0;padding: 0;}
.con{
width: 300px;
height: 24px;
margin: 10px auto;
border: 1px solid #f00;
font-size: 14px;
line-height: 24px;
}
span{
border-right: 1px solid #00f;
}
</style>
</head>
<body>
<div class='con'>
<span>独行冰海</span>
<span>内联元素</span>
<span>小空隙</span>
</div>
</body>
</html>

如图：

左侧有明显的空隙

原因：

内联元素在html中换行的同时会产生一个文本节点，可以使用负值的margin-right或者letter-spacing + word-spacing来解决这个问题，或者使用float，不考虑chrome可使用font-size基本解决。

浮动之后：

inline-block用于块对象的横向排列（如图片组），其有着一些float不可替代的作用（如不错位、可垂直居中等），但在实际应用中，还是存在一个很纠结的弊端——有缝

行元素的使用方法：

.father { font-family:'微软雅黑'; font-size:12px;}
.father span { display:inline-block; background:#f60; width:100px; height:100px; margin-right:-0.5em;}

对象为块对象时：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>当对象为块对象时的解决方法</title>
<style type="text/css">
* { margin:0; padding:0;}
.father { font-size:0px; font-family:'微软雅黑';}
.father li { display:inline-block; *display:inline; zoom:1; background:#f60; width:100px; height:100px; margin-right:0; font-size:12px;text-align: center;line-height: 100px;}
</style>
</head>
<body>
<ul class="father">
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
</body>
</html>