Webkit浏览器中的意外保证金

Question

我遇到了2柱，流畅布局的问题。两列都位于带.dp_stage_sizer的div（overflow: auto）内; .spl_aside浮动在左侧，spl_main只是普通的position: relative，margin-left。

只要我使用宽度和边距的像素值，这样就可以正常工作，但是因为这个网站要流畅（无论如何都低于某个窗口宽度），除了.dp_stage_sizer的宽度之外的所有内容都是百分比。这会导致spl_main在其右侧发出额外的边距，因此它不与其父元素对齐，但在Webkit浏览器中仅 （尽管边距更大） Safari比Chrome）。

下面是我可以管理的蒸馏版本中的代码：

HTML：

<div class="dp_stage_sizer">
    <div class = "spl_aside">
        aside
    </div>
    <div class = "spl_main">
        main
    </div>
</div>

CSS：

div.dp_stage_sizer
{
    position: relative;
    max-width: 1080px;
    margin: 0px auto;
    overflow: auto;

    background-color: silver;
}

.spl_main
{
    position: relative;
    margin: 0% 0% 0% 30%;
    overflow: hidden;

    background-color: green;
    height: 400px;
}

.spl_aside
{
    position: relative;
    float: left;
    width: 20%;
    overflow: hidden;

    background-color: red;
    height: 300px;
}

最后为想要试验的人提供JSFiddle。

---

下面是使用Chrome网络检查器拍摄的图像，显​​示了三个div中每个div的边距：

dp_stage_sizer：

spl_aside：

spl_main：

Answer 1

您可以通过在position: absolute上设置.spl_aside而不是将其浮动来解决此问题。请注意，如果您希望在某个位置下方放置内容，则表示您无法使用clear:float。

Answer 2

另一种解决方案可能是使用inline-blocks。如何实现这取决于您需要哪种浏览器支持。离开我的suggestion in a fiddle。