IE6 浏览器常见兼容问题 大汇总(23个)

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}
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%}
{ -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中不认识此属性则加入zoom1;或者height1%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()可以取空值。

子标签浮动时,给父标签浮动

下一标签直接清浮动:兄弟标签浮动时,下一标签直接写入清除clearboth;就可以。

使用positionabsolute;清除浮动。

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

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

默认 hasLayout=true 的标签:

<table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee> 

很多情况下,把 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的值:leftright 

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值