作者: 就以

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的版本。不過其實宣告拿掉是比較不好就是。會遇到這個是因為之前有案子被要求把宣告拿掉發現的。

免費icon網站

我很常用的icon網站：http://www.iconfinder.com/

有免費的，也有可商業使用的。不過因為是外國網站，所以搜尋的時候要打英文。搜尋後，在列表上面的過濾器選擇「Allowed for commercial use (No link required)」，過濾出來的就是可以商業使用，且不需要留連結的圖片了～

IE底下，垂直對齊 vertical-align 的 CSS 解決方法

一般html寫法

<ul class="photo">
<li><div><img src="img/01.jpg"></div></li>
<li><div><img src="img/02.jpg"></div></li>
<li><div><img src="img/03.jpg"></div></li>
<li><div><img src="img/04.jpg"></div></li>
<li><div><img src="img/05.jpg"></div></li>
<li><div><img src="img/06.jpg"></div></li>
<li><div><img src="img/07.jpg"></div></li>
<li></li>
<li></li>
</ul>

為ie需要修改的html

<ul class="photo">
<li><div><span></span><img src="img/01.jpg"></div></li>
<li><div><span></span><img src="img/02.jpg"></div></li>
<li><div><span></span><img src="img/03.jpg"></div></li>
<li><div><span></span><img src="img/04.jpg"></div></li>
<li><div><span></span><img src="img/05.jpg"></div></li>
<li><div><span></span><img src="img/06.jpg"></div></li>
<li><div><span></span><img src="img/07.jpg"></div></li>
<li></li>
<li></li>
</ul>

 

css的設定請參考此文章

另外一篇也是在講這個，方法不太一樣：图片垂直居中的使用技巧