IE6浏览器常见的bug,缺陷的解决办法

2017-12-11

IE6不支持min-height，解决办法使用css hack：

1
2
3
4
5
.target {
  min-height: 100px;
  height: auto !important;
  height: 100px;   // IE6下内容高度超过会自动扩展高度
}

ol内li的序号全为1，不递增。解决方法：为li设置样式display: list-item;

未定位父元素overflow: auto;，包含position: relative;子元素，子元素高于父元素时会溢出。解决办法：1）子元素去掉position: relative;; 2）不能为子元素去掉定位时，父元素position: relative;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
.outer {
  width: 215px;
  height: 100px;
  border: 1px solid red;
  overflow: auto;
  position: relative;  /* 修复bug */
}
.inner {
  width: 100px;
  height: 200px;
  background-color: purple;
  position: relative;
}
</style>

<div class="outer">
  <div class="inner"></div>
</div>

IE6只支持a标签的:hover伪类，解决方法：使用js为元素监听mouseenter，mouseleave事件，添加类实现效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style type="text/css">
.p:hover,
.hover {
  background: purple;
}
</style>

<p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>

<script type="text/javascript">
function addClass(elem, cls) {
  if (elem.className) {
    elem.className += ' ' + cls;
  } else {
    elem.className = cls;
  }
}
function removeClass(elem, cls) {
  var className = ' ' + elem.className + ' ';
  var reg = new RegExp(' +' + cls + ' +', 'g');
  elem.className = className.replace(reg, ' ').replace(/^ +| +$/, '');
}

var target = document.getElementById('target');
if (target.attachEvent) {
  target.attachEvent('onmouseenter', function () {
    addClass(target, 'hover');
  });
  target.attachEvent('onmouseleave', function () {
    removeClass(target, 'hover');
  })
}
</script>

IE5-8不支持opacity，解决办法：

1
2
3
4
5
.opacity {
  opacity: 0.4
  filter: alpha(opacity=60); /* for IE5-7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}

IE6在设置height小于font-size时高度值为font-size，解决办法：font-size: 0;
IE6-7不支持display: inline-block解决办法：设置inline并触发hasLayout

1
2
3
display: inline-block;
*display: inline;
*zoom: 1;

IE6下浮动元素在浮动方向上与父元素边界接触元素的外边距会加倍。解决办法： 1）使用padding控制间距。 2）浮动元素display: inline;这样解决问题且无任何副作用：css标准规定浮动元素display:inline会自动调整为block
通过为块级元素设置宽度和左右margin为auto时，IE6不能实现水平居中，解决方法：为父元素设置text-align: center;

IE6下，内容会撑开设置好的高度。有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高。解决办法:

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.box { width:400px;}
.left { width:200px;heigth:300px;background:red;float:left;}
.right { width:200px;float:right;}
.div { width:180px;height:180px;background:blue;padding:15px;}
</style>
<div class="box">
  <div class="left"></div>
  <div class="right">
    <div class="div"></div>
  </div>
</div>

IE6下，子元素有相对定位的话，父级的overflow包不住子元素。解决办法：

1
2
3
4
5
6
7
<style>
.box { width:200px;height:200px;border:1px solid #000;overflow:hidden;}
.div { width:150px;height:300px;background:yellow;position:relative;}
</style>
<div class="box">
  <div class="div"></div>
</div>

当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失。解决办法：

1
2
3
4
5
6
7
8
9
<style>
.box { width:200px;height:200px;border:1px solid #000;position:relative;}
span { width:50px;height:50px;background:yellow;position:absolute;right:-20px;top:0;}
ul { width:150px;height:150px;background:red;padding:0;float:left;display:inline;}
</style>
<div class="box">
  <ul></ul>
  <span></span>
</div>

在IE6下的文字溢出bug。即：子元素的宽度和父级的宽度相差小于3px的时候，或者两个浮动元素中间有注释或者内嵌元素的时候，IE6下文字就会溢出，解决办法：

1
2
3
4
5
6
7
8
9
10
<style>
.box { width:400px;}
.left { float:left;}
.right { width:400px;float:right;}
</style>
<div class="box">
  <div class="left"></div>
  <span></span>
  <div class="right">哈哈哈哈哈哈哈哈</div>
</div>

在IE6下，li自身没有浮动，但是li的内容有浮动，li下边就会产生一个间隙，解决办法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
ul {margin:0;padding:0;width:302px;}
li { list-style:none;height:30px;border:1px solid #000; vertical-align:top;}
a { width:100px;float:left;height:30px;background:red;}
span { width:100px;float:right;height:30px;background:bule;}
</style>
<ul>
  <li>
    <a href="#"></a>
    <span></span>
  </li>
  <li>
    <a href="#"></a>
    <span></span>
  </li>
  <li>
    <a href="#"></a>
    <span></span>
  </li>
</ul>

在所有浏览器中子元素的margin-top,margin-bottom值会传递给父级；解决办法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
body { margin:0;}
.box { background:bule;border:1px solid #000;zoom:1;}
.div { width:200px;height:200px;background:red;margin:100px;}
/*
  在IE6下解决margin传递要触发haslayout
  在IE6下父级有边距的时候，子元素的margin值消失
  解决办法：触发父级的haslayout
*/
</style>
<body>
<div class="box">
  <div class="div"></div>
</div>
</body>

在IE6下有元素浮动时，如果宽度需要由内容撑开，就给里边的块状元素都加浮动，正常浏览器不用加浮动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.box {width:400px;}
.left {background:red;float:left;}
.right {float:right;background:bule;}
h3 {margin:0;height:30px; float:left;}
</style>
<div class="box">
  <div class="left">
    <h3>左侧</h3>
  </div>
  <div class="right">
    <h3>右侧</h3>
  </div>
</div>
© 2022 一个爱听歌的搬砖工 - Powered by Hexo - Theme Chan