瀏覽器css差異

2021-04-27 09:08:39 字數 969 閱讀 4964

一、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。

瀏覽器差異

移動端瀏覽器沒報錯無法看報錯資訊 移動端真機除錯,引入vconsole array.prototype.slice.call document.getelementbyid test childnodes 用上面的方法可以把 id 為 test 的子節點轉換成陣列 ie8及之前不能直接這樣使用 解決...

瀏覽器差異記錄

1.content home content 問題補充 我知道是寬度,width 與 width 區別是什麼,哦,謝謝。回答 下劃線 ie6支援下劃線,ie7和firefox等均不支援下劃線。你那個 的意思就是ie6下面寬度 449px 其他瀏覽器下寬度 460px 2.把乙個做為背景,在上面輸入文...

css盒子在不同瀏覽器下的差異

標準盒子模型 盒子模型的氛圍包括四個部分 margin,border,padding,content 標準盒子模型的content不包括其他內容,只有width跟height部分 content height width border size預設值為content box,表示標準盒子模型 ie盒...