老版本 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;。要让它们实现此效果分两种情况：

一、行内元素

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

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






  abc
  def

二、块状元素

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

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

滚动条与resize

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

abc

因此，有时窗口大小只改变一次，却会触发两次 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 之间没有被其他东西分隔开，那么它们的上、下边框会被"吞掉"


abc
123

此问题的具体表现如下：

无论边框宽度是多少（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. 在它们上面或下面放置一个有高度的元素（仅对放置了这个元素的那面有效）