瀏覽器css差異

 

一、CSS選取器差異

一個CSS的IE和FF差異，#popup_container .alert{}
在IE6下alert類只能作用於#popup_container的子項目。
FF下alert類可以作用於#popup_container和其子項目。

二、z-index在IE中的迷惑

z-index屬性適用於定位元素（position 屬性值為 relative 或 absolute 或 fixed的對象），用來確定定位元素在垂直於顯示屏方向（稱為Z軸）上的層疊順序（stack order）。

每一個定位元素都歸屬於一個stacking context。根項目形成root stacking context，而其他的stacking
context則由定位元素產生（此定位元素的z-index被定義一個非auto的z-index值），定位子項目會以這個local
stacking context為參考，用相同的規則來決定層疊順序。並且stacking context和 containing block 之間並沒有必然聯絡。

當stacking context一樣的時候，就用z-index的值來決定怎樣顯示，如果z-index也相同（即stack level相同），則按照檔中後來者居上的原則（back-to-front ）的順序來層疊。

當任何一個元素層疊另一個包含在不同stacking context元素時，則會以stacking context的層疊層級（stack
level）來決定顯示的先後情況。也就是說，在相同的stacking
context下才會用z-index來決定先後，不同時則由stacking context的z-index來決定。例如：

定位元素A（z-index:100）裡面有定位元素A1（z-index:300），而定位元素B和元素A兄弟關係（z-index:200）。你會發現無論A1的z-index是多大，也會被z-index是200的B所覆蓋，因為A的z-index只有100。