IE6 浏览器常见兼容问题大汇总（23个）

最新推荐文章于 2020-12-23 22:02:10 发布

somnus_ly

最新推荐文章于 2020-12-23 22:02:10 发布

阅读量1.3k

点赞数

分类专栏：兼容问题

本文链接：https://blog.csdn.net/somous_ly/article/details/38350683

版权

兼容问题专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

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

在此总结了常见的浏览器兼容问题，里面也有IE6的常见兼容问题，供大家分享。

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

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

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

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

产生条件：不同浏览器；

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

html { font-family:"微软雅黑",Arial,sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p,th,td { padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial}
table { border-collapse:collapse;border-spacing:0}
fieldset,img { border:0}
a { text-decoration:none;color:#000;outline:none}
li { list-style:none}
caption,th { text-align:left}
h1,h2,h3,h4,h5,h6 { font-size:100%;font-weight:normal}
input,button,textarea,select,optgroup,option { font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select { *font-size:100%}
a { -webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-ms-transition:all 0.5s linear;-o-transition:all 0.5s linear}

为防止不同浏览器默认样式对于网页布局样式造成的影响，通常我们在HTML文件的头部引入上面这段重置代码，将一些浏览器所不同的样式以及部分标签的默认样式清除掉。

3.横向双倍外边距

产生条件：在IE6中块元素浮动后，会出现横向双倍margin现象。

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

IE6存在不少的兼容问题，今天要说的是IE6 的横向双倍外边距

横向双倍外边距的触发条件：

当浮动元素的浮动方向和浮动边界的方向一致。此时用IE6查看网页，就会发现，设置的横向的边距变成了双倍。

如：元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理，元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会。

那么，如何修正这个IE6下的横向双倍外边距的Bug呢？

只需要给浮动元素加上display:inline;的CSS属性就可以了。

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;}

选择清浮动位置时应注意以下：1、清浮动一定要在浮动标签完成浮动布局以后添加，否则会影响到浮动标签布局；2、清除浮动必须与前面的标签属于同级关系。

①clear属性定义了元素某个方向上不允许出现浮动元素：none（允许两边都可以有浮动对象）/left（…）/right（不允许右边有浮动对象）/both（不允许有浮动对象）;

②空标签清除浮动：在HTML页面中加入一个空标签用来清除浮动。

HTML：<div class="clear"> </div>

CSS:.clear{clear:both;hegiht:0;overflow:hidden;}

clear:both;是清除所有浮动；height:0;overflow:hidden;是用来改变IE6下标签有默认的低于10px的行高时将以10px的高度显示的bug。

但是空标签清浮动会增加多余的代码。

③overflow：在需要清除浮动的腹肌标签中加入overflow即可，在IE6中不认识此属性则加入zoom：1；或者height：1%；css样式改为：.out{overflow:auto;zoom:1;}该属性对于父标签设置的高度小于子标签时，IE6/7、遨游则以下拉框形式出现，而火狐、谷歌、欧鹏、IE8会将子标签超出部分隐藏掉。

overflow:visible属性只能对IE6/7、遨游起作用，对火狐、谷歌、欧鹏、IE8无清浮作用。

overflow:visible(不剪切内容也不添加滚动条)/auto（是body对象和textarea的默认值，在需要时剪切内容并添加滚动条）/hidden（超出部分隐藏）/scroll（总是显示滚动条）;

④after清浮动：css样式为：

.out{zoom:1;}/*==for IE6/7 Maxthon2==*/

outer:after {clear:both;content:"";visible:hidden;display:block;}/*==for FF/chrome/opera/IE8==*/

其中clear:both;只清除所有浮动；content:"";display:block;对于FF/chrome/opera/IE8不能缺少，content（）可以取空值。

⑤子标签浮动时，给父标签浮动

⑥下一标签直接清浮动：兄弟标签浮动时，下一标签直接写入清除clear：both；就可以。

⑦使用position：absolute；清除浮动。

9.a标签hover不适用于所有标签

产生条件：IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用；

解决办法：合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果；详情请查看日志：兼容IE6 a标签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效果将消失，使display:none;失效。

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元素水平垂直居中。

<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style type="text/css">
  .out{width:400px;height:300px;margin:20px auto;display:table-cell;text-align:center;vertical-align:middle;background:#ccc;}
  .out img{width:100px;height:100px;background:#fcc;}
</style>
</head>

<body>
<div class='out'>
  <img src="" alt="" />
</div>
</body>
</html>

其他的CSS实现垂直居中的方法

A 在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。

content 清除浮动，并显示在中间。

优点：适用于所有浏览器；没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

缺点：唯一我能想到的就是需要额外的空元素了

#floater{float:left; height:50%; margin-bottom:-120px;}
#content{clear:both; height:240px; position:relative;}

<div id="floater"></div>
<div id="content">
Content here
</div>

B 使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。优点：简单；缺点：IE(IE8 beta)中无效；无足够空间时，content 被截断，但是不会有滚动条出现

<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8' />
<style type="text/css">
.outer{height:240px;width:500px;margin:20px auto 0;position:relative;background:#ccf;}
.inner{width:300px;height:100px;background:#9f9;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;text-align: center;}
.inner img{height:100px;}
</style>
</head>

<body>
<div class="outer">
<div class="inner">
<img src="bokan.png" alt="" />
</div>
</div>
</body>
</html>

C 使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。

优点：适用于所有浏览器；不需要嵌套标签。缺点：没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)

.content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}

<div class="content">
Content goes here

</div>

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的来源。

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)

21.多显示一个字

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

处理方法：果断删掉注释！

22.CSS优先级！important

产生条件：IE6当中，在同一组CSS属性中，!important不起作用；

处理方法：单独设置。

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

产生条件：IE6浏览器；

处理方法：1、将图片转化为块级对象，即display:block。还有四种其他方法:

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;}”。如果要实现图文混排，这种方法是很好的选择。

somnus_ly

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
IE6 浏览器常见兼容问题大汇总（23个）

IE6以及各个浏览器常见兼容问题大汇总综述：虽然说IE6在2014年4月将被停止支持，但是不得不说的是，IE6的市场并不会随着支持的停止而立刻消散下去，对于WEB前端开发工程师来说，兼容IE6 兼容各个浏览器，依然是不得不面对的工作。在此总结了常见的浏览器兼容问题，里面也有IE6的常见兼容问题，供大家分享。 1.文档类型的声明。产生条件：IE6浏览器，当我们没有书写这个文档声
复制链接

扫一扫