2016-12-15 40 views
0

Example fiddleChrome有錯誤,用CSS夾嵌套的div

我有這樣的HTML:

<div class="parent"> 
    <div class="child"></div> 
</div> 

而這樣的CSS:

.parent { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background: red; 
} 
.child { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    clip: rect(auto auto auto 100px); 
    background: green; 
} 

所以家長通過孩子完全重疊。在FF中我可以看到父項,但在鉻中它是不可見的。但是,如果我正在設置,例如,left:1px給孩子,父母即刻出現。我怎樣才能避免這個錯誤?

回答

1

你有沒有試圖使他們的兄弟姐妹,而不是父/子:

.sibling1 { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
} 
 
.sibling2 { 
 
    position: absolute; 
 
width:100px; 
 
height:100px; 
 
    clip: rect(auto auto auto 100px); 
 
    background: green; 
 
}
<div class="sibling1"></div> 
 
<div class="sibling2"></div>

+0

其實,一個好主意。適合我的真實情況。我仍然對解決這個問題的其他方式感興趣,但這只是一個學術目的,所以接受這個答案。 –

0

我想你需要小心你實際在這裏做什麼。

您正在告訴孩子在所有四邊都有0px的絕對位置,我認爲這是2個瀏覽器以不同方式處理它的位置。你告訴孩子需要在每一側接觸,而不必指定它需要的寬度或高度。

鉻似乎對待,如果你剛剛給它width: 100%; height: 100%;類似。通過檢查元素並查看計算出的樣式,我們可以看到這一點,它給了孩子100px的高度和寬度(父母的高度和寬度)。

另一方面,Firefox沒有。孩子沒有高度或寬度。換句話說,它實際上並不佔用屏幕上的任何像素,因此您可以看到父級。

我不認爲這是一個錯誤,而是無效的CSS和您的瀏覽器儘量顯示它。

定位時,可以指定頂部或底部,左側或右側,但不是全部。然後給出元素的高度和寬度。

如果你讓我知道你正在努力達到什麼目標,我會很樂意幫助我盡我所能。

我希望這是有用的。

+0

你嘗試設置'寬度:100%'和'高度:100%'到我的小提琴? [我確實](https://jsfiddle.net/47ay1304/3/),並沒有改變任何東西。問題不在於定位,而在於'剪輯'以及Chrome如何呈現它。 –

+0

再次,你想達到什麼目的? – Brad

+0

好的,我明白你的意思了,孩子的剪裁也是在chrome中移除父母。這看起來像一個鉻中的錯誤。在鉻,邊緣,FF和IE11測試 – Brad