Chrome 错误：忽略了一些 CSS 规则答案

【问题标题】：Chrome Bug : Some CSS rules ignoredChrome 错误：忽略了一些 CSS 规则
【发布时间】：2015-04-14 06:28:03
【问题描述】：

我希望我可以共享一些沙箱（jsfiddle），但必须从外部加载 css 才能发生错误。

您可以非常轻松地重新创建它，但它必须是远程的并且使用外部样式表。就像在 PROD 中经常一样。

HTML：

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type='text/css' href="style.css">
</head>
<body>
    <div class='foo'>Foo</div>
    <div class='bar'>Bar</div>
</body>

CSS：

.foo {
    display: inline;
}
.bar {
    float: right;
}

有了这个代码，你应该有这个：

↑ Foo 和 Bar 是在同一行。

但在 Chrome 中，有时你得到的是：

↑bar不在同一行。

它不会每次都发生，因此您可能需要重新加载 (ctrl+R) 多次才能看到它仅发生一些次。

但有一些方法可以让它每次都发生（或几乎）。我至少找到了：

当您打开 Chrome Inspector 后，转到 elements 选项卡（不会在任何选项卡上发生！）
当页面中有iframe 时

因此，如果您添加 iframe，例如：

<div class='foo'>Foo</div>
<div class='bar'>Bar</div>
<br>
<iframe src="https://www.cia.gov/"></iframe>

你会经常遇到这个错误。

请注意，例如 <style></style> 内部包含 css 时不会发生这种情况。

我发现远程服务器 + 外部 css + iframe + 检查器之间的共同因素是所有这些都使页面计算时间更长。

您对为什么会发生这种情况以及如何防止这种情况有任何想法吗？

编辑：

我不希望 另一种方式 对齐两个元素。我想要的是了解原因。

我制作了这个快速的 GIF，显示如果您从检查器中删除浮动，然后再次返回，则错误已解决，Bar 将首先到达应有的位置。

【问题讨论】：

为什么一个是浮动的，另一个是内联的？为什么不float: left/float: right？
先放浮标。
因为这是一个真实用例的抽象，它是我能找到的最简单的标记来显示错误。

标签： javascript html css google-chrome iframe

【解决方案1】：

使用包含两个跨度的外部 div（跨度，因为它是内联的）。将一个跨度的位置指定为 float left ，将其他位置指定为 float right 。我已经用 chrome 和 safari 对其进行了多次测试，你也可以试试。让我知道它是否适合您。

.foo {
    float:left;
}

.bar {
    float: right;
}

#headerDiv{
     width:100%;
     height:20px;
}

<div id="headerDiv">
 <span class='foo'>Foo</span>
    <span class='bar'>Bar</span>
</div>

【讨论】：

谢谢，但我很抱歉，我似乎不太清楚，但我不想要一种对齐两个元素的方法。您在此处看到的标记实际上也适用于对齐两个元素。它适用于所有浏览器，甚至 Chrome，但有时它不起作用，这就是我的全部问题
这些被称为竞态条件，很难调试，这也可能是由于一次又一次的DOM加载而发生的。