設置爲「」時，CSS內容屬性強制清除？

這是一個奇怪的CSS問題，我希望有人可以擺脫一些光...設置爲「」時，CSS內容屬性強制清除？

我使用Twitter Bootstrap，我看到一些非常奇怪的浮動/清除行爲。我有一個正確的浮動div和主要內容中的橫向表單。第二個表單字段似乎在沒有充分理由的情況下在浮動div下面清除。瀏覽所有的HTML元素和CSS聲明，這是一個奇怪的屬性，導致這種情況發生。我已將其縮減爲單個CSS聲明：

.control-group::before, .form-horizontal .control-group::after { 
    display: table; 
    content: ""; 
    line-height: 0; 
}

具體而言，內容：「」;如果你禁用了這一個聲明，它就會浮出第一個字段，一切都很好。

我創建了一個JS提琴證明：http://jsfiddle.net/whiteatom/UJ89p/1/embedded/result/

的源代碼：http://jsfiddle.net/whiteatom/UJ89p/1/

這是設計？ W3規格？這僅針對某些瀏覽器（在MacOS上的Chrome，Safari和FF中測試過）？ Bootstrap團隊試圖用這個空字符串屬性來完成什麼？我可以覆蓋它，而無需編輯引導CSS文件？

乾杯，

來源

2012-12-01 whiteatom

這是設計？

是的。

W3 spec？

Here it is.空字符串仍被視爲內容;如果您想完全防止生成一個盒子，則需要使用content: none。不修改引導文件，你應該能夠只需添加下面的規則，以你自己的樣式表（重寫content: ""聲明）：

/* Single-colon pseudo-elements for consistency with Bootstrap's IE8 compat */ 
.form-horizontal .control-group:before, .form-horizontal .control-group:after { 
    content: none; 
}

注意浮子被清除，因爲所使用的::after僞元素作爲clearfix。該clear聲明駐留在引導樣式表的其他地方一個單獨的規則：

.form-horizontal .control-group:after { 
    clear: both; 
}

通過添加適當的content: none聲明它將阻止僞元素從根本上被渲染，從而防止間隙。

這是僅針對某些瀏覽器（在Chrome，Safari和Mac上測試的FF）？ Bootstrap團隊試圖用這個空字符串屬性來完成什麼？

Some very old versions of Chrome, Safari, Firefox and Opera don't support content: none，而是錯誤地將content: ""（與空字符串）視爲沒有內容。支持content: none的版本正確處理兩個值，IE8和更高版本也如此。

我猜測通過使用空字符串，他們正試圖說明這些舊的瀏覽器。如果是這樣的話，它應該被重寫與content: none所以新版本將使用正確的值，就像這樣：

.form-horizontal .control-group:before, .form-horizontal .control-group:after { 
    display: table; 
    content: ""; 
    content: none; 
    line-height: 0; 
}

如果是這樣的 - 這是我最好的猜測 - 那麼一個錯誤報告，可能是爲了。

來源

2012-12-01 03:43:03 BoltClock

我看不清清楚是如何設計的..空字符串不能強迫div放在浮動div下面嗎？沒有明確的，沒有寬度？如果我在div中放置一個空格，它不會低於浮動的div。那麼爲什麼空字符串會導致這種情況？ – whiteatom

@whiteatom：空字符串仍然會生成一個框，所以如果該框應該提供清除，它將清除。 – BoltClock

沒有框需要清楚的聲明來清除？我可以把h1放在那裏，它不會清楚......這是非常令人沮喪的。我不能爲我的生活看到原始聲明如何產生這種效果。我想理解這裏的原因 - 因爲你所說的話似乎與我的CSS知識相矛盾。 – whiteatom

設置爲「」時，CSS內容屬性強制清除？

回答

相關問題