html - Webkit 浏览器中的意外边距

Question

我在使用 2 列流动布局时遇到问题。两列都在一个 div (.dp_stage_sizer) 内，带有 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 中每一个的边距:

dp_stage_sizer:

spl_aside:

spl_main:

Answer 1

另一种解决方案是使用 inline-blocks。你如何实现它取决于你需要什么样的浏览器支持。离开我的suggestion in a fiddle .