热门搜索:

您的位置: 首页 -> 浏览器 -> CSS在IE6中出现的常见问题及解决方法

CSS在IE6中出现的常见问题及解决方法
发表于:2013-09-05 14:21:40 阅读次数:0
如果你是一位Web前端工程师,那么一定会无数次地痛骂微软,痛骂IE6,因为IE6简直就是WEB前端工程师的噩梦,当你把页面设计好的时候在大多数浏览器中测试一切正常的情况下,拿到IE6中却出现各种意想不到的问题,虽然有心里准备,但有时还是会恨不得把开发IE6的那些程序猿们大卸八块,骂归骂,问题还是得解决,下面为了让广大的前端工程师能够好过一些,软件盒子整理了一些有关IE浏览器自身的BUG问题以及CSS在IE6中出现的常见问题及解决方法,希望对大家有所帮助。

一、IE6中浮动元素的双倍Margin的Bug

IE6下比较有名的BUG就是浮动元素的双边距BUG,这个BUG出现有三个条件:1、浮动;2、margin;3、块元素。有了这三个条件,IE6就会出现经典的双边距BUG。
CSS代码:
div
{
background: #95cfef;
border: 1px solid #36f;
float: left;
height: 100px;
margin: 30px 0 0 30px;
width: 300px;
}
HTML代码:

预览效果对比(如图所示:)

修复方法:
只需要改变浮动元素的第三个条件,也就是说在浮动元素中增加一个“display:inline”属性,这样就可以轻松的解决“浮动元素的双倍Margin”的Bug。

二、IE6中设置元素的最小高度

在很多时候都会用到最高度(min-height),但是其他浏览器都好说,就是IE6不支持最小高度。
CSS代码:
div {
min-height: 100px;
height: auto !important;/*现代浏览器下,内容高度超过100px时自动获得其高度*/
height: 100px;/*此值设置和min-height值一样,因为IE6下元素高度会根据内容自己的高度而定,所以内容高度低于min-height值时,为了达到min-height效果,需要给元素一个显式的高度值*/
}

HTML代码:
最小高度


三、IE6中设置元素的最小宽度

1、在很多时候都会用到最高度(min-height),但是其他浏览器都好说,就是IE6不支持最小高度。解决的原理是针对IE6,用CSS写一套js代码即可。
CSS代码:
div
{
min-width:924px;
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<924?"924px":"");/* IE6下最小宽度的CSS表达式 */
}
HTML代码:
最小高度

2、触发并利用IE6-layout的怪异特性

CSS代码:
.ie6-out{
_margin-left:900px;
_zoom:1;
}
.ie6-in{
_position:relative;
_float:left;
_margin-left:-900px;
}
#min-width{
min-width:900px;
_zoom:1;
}
HTML代码:

ie6-下,容器实现模拟min-width效果。请任意改变浏览器窗口大小,再点击按钮“查看宽度”。

四、IE6中列表li的楼梯Bug

li在IE6下呈楼梯状的效果,也可以算是IE6的一个经典Bug了吧。他通常发生在li中放置了一些元素内容(比如说a)而且对其进行浮动,但li本身不浮动,此时在IE下就会有楼梯上了,具体先看下面的代码:

CSS代码:
ul {list-style: none;}
ul li a {
display: block;
width: 130px;
height: 30px;
float: left;
background: #95CFEF;
border: solid 1px #36F;
}
HTML代码:

预览效果对比:

修复方法:

修复方法一:在li元素中也加上一个浮动
ul li {float: left;}
修复方法二:把块元素li变成内嵌元素,在li元素中添加“display:inline”
ul li {display: inline;}

五、IE6中列表li之间的空隙

这个Bug也是针对于li的,在IE下会无端增中li与li之间的垂直距离
CSS代码:
ul {list-style: none;}
ul li {width:130px;}
ul li a {
display: block;
width: 130px;
height: 30px;
float: left;
background: #95CFEF;
border: solid 1px #36F;
}
HTML代码:

预览效果对比:

修复方法:
修复方法方法有很多,在这里我只提供一种比较简单的方法供大家参考:在li元素上添加垂直对齐方式即可。
ul li {vertical-align:top;}

六、IE6下无法设置元素的微高

在Web页面中很多时候高度会很小,这时候在IE6下并不能实现。

CSS代码:
div {
background:red;
height:2px;
}
HTML代码:

预览效果对比:

修复方法:
在div元素中添加“overflow: hidden;”即可。
overflow: hidden;

七、IE6和IE7下overflow:auto与position:relative的碰撞

这个Bug也叫作“距出边界的Bug”,而这个Bug 只出现在 IE6 和 IE7 中,有两个块元素,元素设置了 overflow: auto;子元素设置 position:relative 并且其高度大于父元素,在 IE6 和 IE7 中会产生一个比较难看的 Bug,也就是子元素 块不被隐藏会溢出父元素块,而现代浏览器都显示正常。
CSS代码:
.wrap {
border: 1px solid red;
height: 150px;
width: 200px;
background: orange;
overflow: auto;
}
.subDiv {
border: 1px dotted blue;
background: lime;
height: 200px;
width: 150px;
position: relative;
}
HTML代码:

预览效果对比:

修复方法:
这是一个overflow 在IE7~IE6 的bug,不单单只取值auto 会出现这个Bug,就是你设置overflow: hidden 也会出现这个Bug。解决方法也是只要在父元素中加入一个position: relative;就 OK 了。要解决这个难看的Bug 我们只要在父元素中也设置一个position:relative;属性,就会使 IE6 和 IE7 回复到正常状态。
position: relative;

八、IE6浮动层错位(双边距BUG)

当内容超出外包容器定义的宽度时会导致浮动层错位问题。在 Firefox、IE7、IE8 及其他标准浏览 器里,超出的内容仅仅只是超出边缘;但在 IE6 中容器会忽 视定义的 width 值,宽度会错误地随内 容宽度增长而增长。如果在这个浮动元素之后还跟着一个 浮动元素,那么就会导致错位问题
CSS代码:
#container{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: auto;
}
#left,
#right{
background: #95CFEF;
border: solid 1px #36F;
width: 100px;
height: 150px;
margin: 30px;
padding: 10px;
float: left;
}

预览效果对比:

修复方法:
把left和right转换成内嵌元素即可
#left,
#right { display:inline; }

九、IE6下消失的元素

在上面的基础上追加一个典型的IE6 bug:IE6中绝对定位、浮动元素混用时的BUG。一个内容区块,其中包含两个浮动的box,外加一个绝对定位的box,设置如下样式时会发生IE6浮动元素消失的BUG。
CSS代码:
*{ padding:0; margin:0;}
.all{width:400px;}
.top{position:absolute; left:0; top:0; width:400px; height:50px; background:red;}
.left{float:left; width:200px; height:100px; background:green;}
.right{float:left;width:200px; height:100px; background:yellow;}

HTML代码:
 
 
软件盒子1
 
 
软件盒子2
 
 
软件盒子3
 
 

预览效果对比:

修复方法:
解决的方法有很多,在这里,我只说一种比较简单快速的方法。给all加一个display:inline样式可解决。
display:inline;
以上便是今天软件盒子为大家介绍的有关IE6的那些BUG以及CSS在IE6中出现的常见问题及解决方法,通过这些整理收集,希望你能解决CSS在IE6中的兼容性问题,这样也能大大提高工作效率。