IE双倍浮动边界Bug
这篇讲的是IE浏览器下那个经典的“双倍浮动边界”Bug。作者在啃《CSS实战精粹》一书时，专门花了时间研究各种CSS Hack，而这个Bug就是其中绕不过去的一道坎。 问题很具体：当一个元素设置了浮动（float）和左侧（或右侧）的外边距（margin）时，在IE5.x和IE6的怪异模式下，这个外边距会被双倍计算。比如，你只想让它左边空出10px，它却实际空出了20px，布局瞬间崩坏。根因在于IE的旧版渲染引擎对盒模型的解析与现代标准不同，它将浮动元素的margin边界也纳入了总宽度的计算范畴。 经典的解决方案是给浮动元素增加`display: inline;`属性。因为浮动元素本身会变成块级框，加上`inline`并不影响其浮动行为，但却能神奇地让IE“收手”，只计算一次外边距。这个Hack看似简单，背后却是对浏览器渲染差异的深刻理解。 掌握这类针对特定浏览器的“奇技淫巧”，在如今看来或许有些复古。但它揭示的跨浏览器兼容性思维——理解不同渲染引擎的工作逻辑，并用创造性的方式达成一致——在面对任何前端新旧技术融合时，依然是一种宝贵的能力。