IE6/7常见问题 收集及解决（一）

发表于 | 分类于
字数统计: 752 字 | 阅读时长 ≈ 3

  之前搜集和遇到的ie6/7中的问题及解决（一）。

IE6下，快元素有浮动，和横向的margin，横向的margin值会被放大成两倍

解决：将快元素display设置为 inline；

IE6,7下几px的间隙问题

在IE6，7下li本身没有浮动，但内容浮动就会多出几px间隙

解决：（1）li加上浮动
（2）给li加vertical-align加top/bottom等 //垂直对齐方式

IE6,7最小高度问题：

解决：（1）font-size:0; //清除IE6最小高度为19px，但是设置后最小高度为2Px,无法达到1px,效果不佳；
(2)zoom:0.0X;效果同(1),zoom为使用对象的实际尺寸(用浮点数/百分比来定义缩放比例。不允许负值)
（3）overflow:hidden； //效果完美

div的垂直居中问题

vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

example:

1
2
3
4
5
6
7
8
9
10
<style>
    #IamFloat{
        float:left; 
        /*IE下理解为10px*/
        margin:5px;
        /*设置了display后，IE下再理解为5px*/
        display:inline;
    }
</style>
<#div id=”imfloat”></div>

这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元 素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;

IE与宽度和高度的问题

IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，

如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，
可以这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    #box{
        width: 80px; 
        height: 35px;
    }
    html>body #box{ 
        width: auto; 
        height: auto; 
        min-width: 80px; 
        min-height: 35px;
    }
</style>
<#div id=”box”></div>

DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    #box{ 
        float:left; 
        width:800px;
    }
    #left{ 
        float:left; 
        width:50%;
    }
    #right{
        width:50%;
    }
    *html #left{ 
        margin-right:-3px; //这句是关键
    }
</style>
<div id="box">
    <div id="left"></div>
    <div id="right"></div>
</div>

IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。