標籤彙整：ie

IE6、IE7的z-index bug

問題描述：

假設三個div， 依序為A、B、C，裡面個包一個div，分別為A1、B1、C1。如果設定position:absolute在A1跟C1上。且A1設定z-inde:2，C1設定z-index:1，在FF正常顯示下，A1會壓在C1之上。

但在IE6、IE7底下，當C1設定position之後。他們會自動給C一個z-index，且C因為排在A之後，所以C以內的區塊z-index永遠壓在A之上，不管A 或A以內的z-index正值設定多大都一樣。

解決方式：

  1. 把C設定z-index為負值。但這個作法有個很大的壞處，就是C裡面的超連結全部都會被遮蔽，以至於無法使用。
  2. 因為通常會出現這個問題，是在表頭的下拉選單會被底下的蓋住，所以更好的作法是表頭設定position:relative;並且加上z-index:2;或更大的數值，後面那個一定要加，不然一樣沒效。這樣底下的區塊超連結也會不被遮蔽。這個原理跟利用margin設定製作圖div覆蓋效果 所提到的是相同的。

UL、OL在Firefox和IE下的差異

參考文章：UL在Firefox和IE下的不同表現

詳細的內容直接看參考文章囉。
簡單來說，ul、ol在firefox跟ie底下的預設值不同。在firefox預設有padding沒margin。在IE預設有margin沒padding。

我覺得要個別處理很麻煩，所以通常都會導入一個reset.css。在裡面把大部份預設有margin、padding的元素(例如body、h1~h6、p、ul、ol)直接都設定為0。有需要的時候才手動給值。這樣比較單純。

條件注釋相關說明

參考文章：關于條件注釋的幾個實例代碼

如果要針對IE6、IE7、IE8下不同的css，有很多種方法，目前我是用特殊字元的方式(在樣式前面加上*、_、 或尾巴加\8)。因為做起來最省事。但是這種作法的缺點是無法通過W3C CSS驗證。

那如果想要通過驗證，就得用【條件注釋】的方法來做。

應用方式如下
<link rel=”stylesheet” media=”all” type=”text/css” href=”style.css” />
<!–[if lte IE 6]>
<link rel=”stylesheet” media=”all” type=”text/css” href=”style-ie6.css” />
<![endif]–>
<!–[if lte IE 7]>
<link rel=”stylesheet” media=”all” type=”text/css” href=”style-ie7.css” />
<![endif]–>
<!–[if lte IE 8]>
<link rel=”stylesheet” media=”all” type=”text/css” href=”style-ie8.css” />
<![endif]–>

因為條件注釋只有IE看的懂，所以別的瀏覽器不會讀後面的那些樣式檔。

 

 

解決IE6~IE8的css相容性問題

參考文章：解決IE6、IE7、IE8、Firefox的瀏覽器相容性問題！

其實就是ie hack，這裡只註記最簡單的方法，簡單來說：

.aaa{屬性:屬性內容 \9;}—->所有IE懂
.aaa{*屬性:屬性內容;}—->IE7、IE6懂
.aaa{_屬性:屬性內容;}—->IE6懂
.aaa{屬性:屬性內容 !important;}—->Firefox、IE7懂
.aaa{*屬性:屬性內容 !important;}—->IE7懂、其他都不懂

消除IE7以下版本在float時，margin變雙倍的問題

參考文章：display:inline可以消除IE6和IE7下的浮动BUG

bug 描述：在 IE7 以下版本，假設使用 float:left;，那如果再設定 margin-left:5px; 時，實際上顯示的 margin-left 會變成兩倍，也就是10px。只有設定跟float同一邊的margin才會有變兩倍的問題。

解法：在設定float元素上加上 display:inline; 即可。

關於ie 的 haslayout

這幾篇都是跟haslayout有關的

斯芬克斯之迷——ie私有属性haslayout的困扰
如何避开麻烦的margin叠加(margin collapsing)
這兩篇主要是在講

  1. firefox底下float元素不會佔用到高度，以至於父元素不會自動延展高度，而IE的會。實際上firefox是有遵從W3C標準的。而IE會自動延展高度是因為如果有設定寬高，會觸發haslayout（這是很常發生的）。在firefox底下以在父元素上加overflow:hidden來解（如果在父元素上加上float:left;或right，也可解。外國看到的範例比較多用這個解法，裡如wordpress裡面的設定就是用float而不用overflow。）
  2. firefox底下，第一個子元素的margint-top與最後一個子元素的margin-bottom會被父元素搶走。IE也會。這是符合W3C的margin塌陷。但是如果子元素有設定float，在IE底下因為會觸發haslayout，反而避開了塌陷問題。這個的解法同上，就是在父元素加上overflow:hidden;或float屬性。但是如果子元素沒有設定float，父元素設定overflow只會適用於iE7以上，IE6不適用。所以在IE6底下要用height:1%;的方式來解。

斯芬克斯之谜续——IE下失效的margin-left/right
這個應該是我有遇過，但是那時候沒有歸納出是這個原因。

ie hasLayout property – 終結 ie bugs 之「有編置」性質(ie only)
此篇是特性說明，有興趣的瞭解haslayout的可以參考看看。

absolute遇到float元件時起始點的算法

左一個float區塊，右一個absolute區塊，在FF、IE8以上，absolute設定margin-left，距離會是從body的0,0（不被左float區塊影響）算起。

照理來說absolute的起始點本來就不應該被其他的區塊影響，但是在IE6、IE7會。IE6、7的距離會是從float區塊的右邊算起。

解IE底下使用tbody無法使用overflow的方法

方法請見此網址：How to add a fixed table header with a vertical scrollbar in content

照文章寫起來是IE7以下才有的bug。不過因為找這個方法的時候，該案因為拿掉宣告，所以所有IE顯示都有一樣的問題，所以有試著用這個方法來解。但實做上效果並不好。簡單來說顯示還是會怪怪的，客戶那裡一定過不了，所以後來還是沒有採用這個方式。