css - Chrome : overflow:auto + margin:auto fails to layout correctly sometimes

Question

我正在尝试布局一个页面，该页面具有我希望在新行上居中的 anchor 元素。但是这些 block 在 <p> 内 float 图像旁边的元素。

右: http://test.sunnysidemarket.ca/right.jpg

错误: http://test.sunnysidemarket.ca/wrong.jpg

所以基本上我有:

HTML:

<div class="content">
    <div>
        <img src="..." width="276" height="207" />
    </div>
    <div class="body">
          <p>
            ...
            <a class="mediaset" href="...">Link</a>
        </p>
    </div>
</div>

CSS:

.content img {
    float: right;
}

a.mediaset {
    margin: 0 auto;
    width: 220px;
    display: block;
    overflow: auto;
}

或者您可以在 jsfiddle 中看到:http://jsfiddle.net/CVkFw/

问题是间歇性的，有时会发生，有时不会。在我看来，这是 chrome 中的一个错误，其中计算了溢出和边距属性，但是当加载 float 内容时，有时浏览器不会再次布局元素。

有多种方法可以使用 jQuery 和修改我的 HTML 来解决这个问题，但如果可能的话，我真的很想用 CSS 来解决这个问题。

Answer 1

我最好的猜测是这种不稳定的行为是由 global.styles.css 中应用的 overflow: visible 引起的。问题:

.node-article .field-name-body,
.node-synced-facebook-content .field-name-body {
    overflow: visible;
}

我提出这个建议是因为当我为 overflow: hidden 添加这个 CSS 覆盖时，该组件似乎加载得“更稳固”。修复:

.node-article .field-name-body,
.node-synced-facebook-content .field-name-body {
    overflow: hidden;
}

选择器本身可能需要根据它要影响的内容进行调整。 (我显然不太熟悉您页面的 CSS 代码。)但希望这能为您指明正确的方向!