css - CSS 浮动内联元素 (960 GS)

Question

我刚刚检查了 906.gs css 代码，并注意到他们将所有浮动 div 都内联了。

http://960.gs/demo.html

只是想知道这样做的目的是什么……我一直对学习 CSS 理论很感兴趣。

Answer 1

带有 的元素float: left被强制计算display值为block。

有关这方面的更多信息，请参阅：Chrome 中的 jQuery 返回“块”而不是“内联”

还添加的目的display: inline是修复一个IE6 错误，即“双边距错误”：

http://www.positioniseverything.net/explorer/doubled-margin.html

编码员无辜地将左浮动放入容器盒中，并使用浮动上的左边距将其推离容器的左侧。看起来很简单，对吧？好吧，直到它在 IE6 中查看。在那个浏览器中，左边浮动边距的长度神秘地增加了一倍！

这是一个没有缺点的免费修复（即使在 IE6 中）：

这意味着浮动上的 {display: inline;} 应该与使用 {display: block;} 没有什么不同（或根本没有显示值），实际上所有浏览器都遵循此规范，包括 IE。但是，这确实会以某种方式触发 IE 停止将浮动的边距加倍。因此，可以直接应用此修复程序，无需任何繁琐的隐藏方法。

事实上，如果您愿意，您可以将 Inline Fix 应用于所有浮点数，因为没有已知的副作用。这样，无论您可能使用或可能不使用任何利润，该错误都无法获得牵引力。