Webkit 浏览器中的意外边距答案

【问题标题】：Unexpected Margin in Webkit BrowsersWebkit 浏览器中的意外边距
【发布时间】：2012-11-23 11:24:39
【问题描述】：

我遇到了 2 列流畅布局的问题。两列都在带有overflow: auto 的div (.dp_stage_sizer) 内； .spl_aside 向左浮动，spl_main 只是普通的 position: relative 和 margin-left。

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

以下是我可以管理的精简版本中的代码：

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:

【问题讨论】：

我不知道这意味着什么，但我只是尝试将旁边的列切换到右侧（向右浮动，并调整spl_main 的边距）。在这种情况下不会出现问题（spl_main 上没有无法解释的左侧边距）
听起来可能是空白问题。尝试将容器 'font-size:' 设置为 '0' 并为其子级重置。
No dice =( 此外，使用网络检查器，您可以看到边距突出显示为边距。我将在几秒钟内发布一张图片。
另外值得注意的是，web inspector 报告右侧边距为 0，spl_aside 的宽度似乎对魔法边距有一些影响。
对我有用的两件事： 1. 如果我将 .spl_main 设置为 76% 宽度，它适合。（虽然这没有意义 - 30% + 76% 不是我来自的 100%） 2. 如果我将 .spl_aside 设置为使用 position:absolute 而不是 float，则边距是正确的。

标签： html css margin fluid-layout multiple-columns

【解决方案1】：

您可以通过在.spl_aside 上设置position: absolute 而不是浮动它来解决此问题。请注意，这意味着如果您希望在某个时间点将内容置于其下方，您将无法使用clear:float。

【讨论】：

对不起，我刚刚发现这个有缺陷，它是如此接近。在我的布局中，任一列都可能更大。如果侧面较大，则不会调整 dp_stage_sizer 的大小。
不过，几乎答案仍然是 +1

【解决方案2】：

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

【讨论】：

我对在主要客户端上使用 inline-block 仍然有些不安。不得不依赖 *IE hack 让我感觉自己做得不够好。不过，这仍然是最好的答案。我会把它投入测试（这个项目刚刚被搁置到星期一）。不要以为你不知道是什么导致了这一切？
恐怕没有，但感觉应该有一个简单的答案。希望 Stack Overflow 的蜂巢思维能够解决它！