Chrome瀏覽器 - 絕對定位和浮動問題

以下是一直在困擾我的問題。我不確定如何描述它，除了我在漂浮在浮動容器上的div出現問題之外，它似乎只是Chrome中的一個問題。Chrome瀏覽器 - 絕對定位和浮動問題

看一看這個：http://jsfiddle.net/H8vVf/。在文本旁邊應該有一個條紋，但在Chrome中，它看起來像是一條走向。

HTML：

<div class="wrapper"> 
    <div class="content">SOME GOOD TEXT</div> 
    <div class="stripe"></div> 
</div>

CSS：

.wrapper::after { 
    content: " "; 
    display: block; 
} 
.content { 
    float: left; 
} 
.stripe { 
    background-color: black; 
    width: 100%; 
    display: inline; 
    position: absolute; 
    height: 1em; 
}

，我想出了一個解決方法，但我只是想知道如果任何人都可以向我解釋是怎麼回事錯誤和原因。如果沒有，我就繼續我的快樂的方式...

來源

2012-04-23 sgcharlie

報價OP：

我有一個div漂浮在浮動容器的問題...

通常，當你float:東西時，頁面上的其他內容應流周圍它。

報價OP：

應該有一個旁分條文本，但在Chrome中，它看起來像一個透。

我不知道你所說的「劃掉」的意思，但你定義與.stripe類元素爲100％寬，這意味着這將是100％，其母公司的寬度。在這種情況下，.stripe的父級是類.wrapper的元素。由於.wrapper類沒有定義的寬度，因此默認情況下，它的寬度是它的父窗口的100％。因此，如您所定義的那樣，條紋將與窗口一樣寬。

報價OP：

我只是想知道如果任何人都可以向我解釋是怎麼回事錯誤和原因。

關於你的代碼...

.stripe { 
    background-color: black; 
    width: 100%; 
    display: inline; 
    position: absolute; 
    height: 1em; 
}

display: inline是在內容流中的元素的屬性。

但是，position: absolute將元素從內容流中取出。

這樣做沒有意義。換句話說，在流程和中不能同時出現流程中的。

Here is the W3C spec which explains the CSS2 Visual Formatting Model以及detailed comparison of normal flow, floats and absolute positioning。

來源

2012-04-23 22:32:17 Sparky

謝謝你的解釋（和編輯，因爲我非常疲倦，問題很滑稽地解釋）。我將來必須牢記這些聯繫。另外，我需要重新考慮我的解決方法。 – sgcharlie 2012-04-24 13:33:17

@Relic，OP要求解釋，而不是解決方案。我給了他一個詳細的解釋，你沒有。所以，因爲你認爲我低估了你的投票結果，你便投了我的票。優雅的行爲。 SO上的一些最佳答案已經完全寫出來......它們不僅僅是一個包含單詞的jsFiddle鏈接，_「與......有關」。事實上，他的問題與你聲稱的無關，正如我在上面清楚解釋的那樣。 – Sparky 2012-04-24 21:51:36

Chrome瀏覽器 - 絕對定位和浮動問題

回答

相關問題