微小高度设置无效

在 IE5/6 中，将 <div></div>，设置高度为 0px ~ 19px，都将显示为 19px。

解决方案：

  1. 设置 overflow: hidden;；
  2. 设置 font-size: 0;；
  3. 在标签里添加注释，即：<div><!----></div>；

不支持min-height

在 IE5/6 下，设置 min-height 无效。

解决方案：

1
2
3
4
div {
  min-height: 100px;
  _height: 100px;
}

设置inline-block无效

1
2
3
4
5
6
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
1
2
3
li {
  display: inline-block;
}

当我们做如上设置后，会发现在除了 IE5/6/7 下，其他浏览器都可以让其横排显示。

解决方案：设置 display: inline; 即可。


margin:0 auto;无效

当我们给 div 元素设置 margin: 0 auto; 时，会发现在 IE5/6 下不能居中显示。

1
2
3
<div class="parent">
  <div class="son"></div>
</div>
1
2
3
4
5
6
.son {
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

解决方案：再给父元素设置 text-align: center; 即可。

1
2
3
.parent {
  text-align: center;
}

新标签不识别

在 IE9 以下版本对 HTML5 新增标签不识别。

解决方案：
使用 html5shiv 可以解决 IE 低版本不兼容的问题，只需要在 head 中加入当版本低于 IE9 时，浏览器会加载 html5.js 脚本，使得支持 HTML5 的新功能，也可以将脚本文件下载到本地。

1
2
3
4
5
6
<head>
  <!--[if lt IE 9]>
  <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'>
  </script>
  <![endif]-->
</head>

margin双倍边距

当我们设置浮动 float: left;，并设置 margin-left 的时候，会发现在 IE6 下有双倍的边距。

解决方案：

  1. 设置 display: inline;；
  2. 设置 display: block;。