標籤: css

解決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; 即可。

css垂直多欄版面延伸

參考文章：重直多欄式版面自動延伸高度、使多欄式版面高度等高

第一篇講的是子元素浮動時，父元素高度無法撐高的問題。這個用overflow:hidden;來解。

第二篇講的則是父元素撐高後，子元素要如何讓他的高度自動隨內容比較多者一起延伸。解法是設定padding-bottom:5000px;撐高，然後設定margin-bottom:-5000px;把邊界拉回。那因為搭配父元素overflow:hidden;的情況下，超過的會被隱藏，看起來就好像延伸了。所以這個必須搭配第一項的設定才能有效果。不然會看到設定padding-bottom:5000px;的區塊會一直往下延伸很長很長。

關於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區塊的右邊算起。

IE6底下div高度小於12px時，依舊顯示為12px的bug

參考文章：http://www.zeali.net/entry/502

IE6雞婆的認為div高度不該小於一行行高。而IE預設字體大小大約為13px，因此當高度小於一個文字的高度時，例如6px，實際上顯示還是會有一行的高度。

解法是設定font-size:0px;，或是乾脆加上overflow:hidden;

此問題只會出現在IE6

a:hover em 在IE6底下失效的問題

在IE6底下，只有a可以使用像hover這樣的偽類。但是如果要用像a:hover em 去指定a內標籤的效果一樣還是會有問題。

解法參考文章：CSS实例:a:hover伪类在IE6下的问题

例如
<a href=”e”>測試<em>斜體</em></a>

然後css只有
a:hover em{color:#ccc;}

那這個效果在IE6不會生效。如果要使其生效，要在他前面加上
a:hover{font-size:13px;}

且a:hover內的屬性，隨便一個都可以。甚至打假的xxx:bbb;也行

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

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

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

IE CSS hack的使用限制

IE css hack使用的特殊符號，如「*」、「_」、「\9」，要建立在IE6、IE7、IE8的表頭都有放<!DOCTYPE html PUBLIC… 宣告的情況下才有用。如果沒放，則IE6-IE8讀CSS的時候「*」、「_」、「\9」（原來拿來作為IE版本過濾的前置符號）在的全部的IE版本都會讀到。

等同於如果宣告拿掉，就沒辦法針對IE6、IE7、IE8做特殊修正，不過當宣告拿掉的時候，IE6~IE8會全部變得跟IE6一樣爛…

所以在製作上反而只要區分IE跟firefox，而不用管IE的版本。不過其實宣告拿掉是比較不好就是。會遇到這個是因為之前有案子被要求把宣告拿掉發現的。