老版本 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. 在它們上面或下面放置一個有高度的元素（僅對放置了這個元素的那面有效）