自我總結CSS中的陷阱（長期更新）

低版本IE bug

萬惡的IE6/7

IE6 position:fixed不支持：經過css expression解決，或者是_position:absolute。

* html, 
* html body {
          background-image: url(about:blank);background-attachment: fixed;
}

* html #menu {
          position: absolute;bottom: auto;top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}

IE6 png24 : 經過DD_belatedPNG.js解決。

IE678不支持css3動畫屬性: 經過http://gucong3000.github.io/transform/解決；

IE6下雙倍邊距問題： 經過*display:inline解決。

IE6下非a標籤的:hover僞類無效：經過JS操做解決

IE6下用border屬性寫三角形
若是用

border-width:10px;
          border-color: transparent  transparent transparent transparent;
          border-style:solid;

這樣寫的話會出現黑邊，
解決方案是使用

doshed：border-style:dashed dashed solid dashed ;

IE6下絕對定位的bug

相對於相對定位的祖先元素對框進行絕對定位，這在大多數現代瀏覽器中實現得很好。可是，在windows上的IE5.5和IE6中有一個BUG，若是試圖相對於相對定位的框的右邊或底部設置絕對定位的框的位置，那麼須要確保相對定位的框已經設置了尺寸。若是沒有，那麼IE會相對於畫布定位這個框。簡單的解決方案時爲相對定位的框設置寬度和高度。

怎樣讓ie瀏覽器支持最小高度

IE不識別min-這個定義，實際上它把正常的width和height看成有min的狀況來使用的。

min-height:200px;
height:auto;
_height:200px;

注意 height必定要在_height以前。

沒法定義1px左右高度的容器

IE6下這個問題是由於默認的行高形成的,解決的方法也有不少,
例如:overflow:hidden | zoom:1 | line-height:1px

IE6下爲何圖片下有空隙產生？

解決方法是能夠改變html的排版，或者設置img爲display:block
或者設置vertical-align屬性爲vertical-align:top|bottom|middle|text-bottom;

IE7如下不支持display:inline-block

解決方案：
第一種：專門爲IE7寫Hack

display:inline-block;
 *display:inline;
 *zoom:1;

特別是 ZOOM:1 這個必須的(觸發haslayout)

第二種：

.selector { display: inline-block }
.selector { *display: inline }

注意這兩個 display要前後放在兩個CSS聲明中才有效果，這是IE的一個經典bug，若是先定義了display:inline-block，而後再將 display設回inline或block，layout不會消失。不能寫進一個聲明中。

另外：input、select、button、textarea的默認display皆爲inline-block,因此    在佈局時應加以注意...

其餘bug

火狐下連接視頻顯示不出來

緣由：z-index致使，使用以下嵌入方式。並用wmode="Transparent"

<embed wmode="Transparent" src="f" allowFullScreen="true" quality="high" type="application/x-shockwave-flash"></embed >

IE9一下不支持input:disabled的樣式修改

IE7下直接使用jquery blur無效，經過settimeout設置blur()便可