Flexbox和位置絕對沒有頂部/底部在Chome與FF和IE

我發現Chrome和Firefox/Safari之間的Flexbox實現有所不同。如果您的位置絕對元素沒有設置頂部/底部/左側/右側，則在Chrome中，元素捕捉到頂部：0，左側：0，而在其他瀏覽器中，頂部和左側值與元素相同靜態定位。Flexbox和位置絕對沒有頂部/底部在Chome與FF和IE

Take a look at the codepen here.

什麼是Flexbox的規範針對這種情況的建議？哪些瀏覽器或瀏覽器正在演示buggy行爲？

HTML

<div class="flex"> 
    <div class="offset">Offset</div> 
    <div class="absolute">Absolute</div> 
</div>

CSS

.flex { 
    display: flex; 
    flex-direction: column; 
    width: 300px; 
    background: #eee; 
    height: 200px; 
    padding: 8px; 
} 
.offset { 
    width: 300px; 
    height: 96px; 
    background: #ccc; 
    margin-bottom: 8px; 
} 
.absolute { 
    position: absolute; 
    background: red; 
    color: white; 
    width: 300px; 
    height: 96px; 
}

來源

2016-09-29 Alexander Flenniken

看看規格，預期的行爲由W3C清楚地概述。 – TylerY86

這不是重複的，「justify-content：space-between;」根本不涉及。 – TylerY86

@ TylerY86，閱讀它說：**這個問題已經在這裏得到了答案：**這不是關於這個問題，而是關於答案。 –

是的，這是在眨眼和WebKit之間佈局的差異。

我認爲目前的建議是要麼指定top和left，要麼使用具有更好行爲的東西。

Is nesting the div an acceptable alternative for the current issue?

I think Blink (Chrome) is technically correct here.
絕對定位的兒童不宜參加柔性盒模型佈局。
它們應該被視爲元素中的起始項目。

編輯：他們可能需要更新他們的test cases - 他們需要分開Blink和WebKit，他們需要這個特殊的重疊測試。

來源

2016-09-29 02:51:33 TylerY86

Flexbox和位置絕對沒有頂部/底部在Chome與FF和IE

回答

相關問題