老版本 IE 下的 CSS 问题/技巧整理

注：如下描述只适用于 IE 的 Standard 模式，未在 Quriks 模式下测试过。

min-width / min-height

IE6 不支持这两个属性，但它会把 width / height 视为 min-width / min-height
所以，跨浏览器的实现方式是这样的：

_width: x;
min-width: x;

---

inline-block

IE6/7 不支持 display: inline-block;。要让它们实现此效果分两种状况：

1、行内元素

display: inline-block; 或 *zoom: 1;
只要对行内元素触发 hasLayout，便可实现 inline-block，上面两句都能达到这个效果。通常用前面那句。

注意：这种状况下，若当前元素的 margin 的单位是 em，那么它参照的是父元素设置的字体大小。缘由不明。

<style>
html, body { padding: 0; margin: 0; }
#wrap { font-size: 100px; }
a {
  border: 1px solid #ccc;
  display: inline-block;
  font-size: 12px;
  margin: 1em;
  padding: 1em;
}
</style>



<div id="wrap">
  <a href="">abc</a>
  <a href="">def</a>
</div>

2、块状元素

让块状元素实现 inline-block，须要在触发 hasLayout 以后，将其设为 display: inline;
两种作法：

1. div{ display: inline-block;} div{ *display: inline;}
   注意，两句必须放在两个声明中

2. div{ display: inline-block; /*for other*/ *display: inline; *zoom: 1; /*for ie*/ }
   这样的好处是没必要放在两个声明里了，但多了一条语句。我的推荐这一个。
   并且这个方法实际对行内和块状元素都有效了，比较便于重用。

---

滚动条与resize

在现代浏览器里，全局的 resize 事件只在窗口大小变化时被触发
但在 IE6/7/8 里，body 元素大小的变动也会触发这一事件：

<div id="content">abc</div>
<script>
window.onresize = function() { alert('resized'); };
setTimeout(function() {
  document.getElementById('content').style.height = '300px';
}, 500);
</script>

所以，有时窗口大小只改变一次，却会触发两次 resize 事件
有的状况下，甚至会致使死循环（即：在响应 resize 事件时，由于修改文档内容/样式，再次触发了 resize 事件）

解决办法，用这种方式监听 resize 事件：

var currheight, currwidth;
window.onresize = function() {
  if(currheight != document.documentElement.clientHeight 
      && currwidth != document.documentElement.clientWidth) {
    alert('resized');
  }
  currheight = document.documentElement.clientHeight;
  currwidth = document.documentElement.clientWidth;
};

P.S. 思路来自 这里，原文中的办法有问题，在这作了一点改进

---

行内元素 border-top/bottom 无效

在 IE6/7 中，若是行内元素的上/下方与 body 之间没有被其余东西分隔开，那么它们的上、下边框会被"吞掉"

<style>span { border: 1px solid #f00; }</style>
<span>abc</span>
<span>123</span>

此问题的具体表现以下：

• 不管边框宽度是多少（1px、100px），都会被吞掉
• 若元素中只存在全角字符（如 汉字），那么上边框会剩下 1px 不被吞
• 若 font-size 不是默认的 16px，有部分边框可能不被吞（未找到具体规律）
• 使部分或整个边框不被吞的方法：
  
  
  1. 推荐 经过设置 zoom: 1; 或 display: inline-block; 让行内元素 hasLayout
  2. 给 body 元素设置 padding 或给任意祖先元素（不包括 body）设置 margin / padding / border
     
     整体上，设置这些数值能让边框的一部分留下来不被吞。
     
     至于留下来的部分是多宽，由于涉及到多层父元素与 body 间各部分 margin / padding 的叠加与抵消，比较复杂，就不一一列出了。
  3. 加大行内元素的 line-height，让其大于 font-size (至于要大多少才能使整个边框不被吞，没有找到规律)
  4. 在它们上面或下面放置一个有高度的元素（仅对放置了这个元素的那面有效）