Question

我希望我可以共享一些沙箱（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;
}

使用此代码，您应该拥有：

enter image description here

↑Foo和Bar 在同一行。

但在Chrome中，有时候，你得到的是： enter image description here

↑bar不在同一条线上。

每次都不会发生这种情况所以你可能需要多次重新加载（ ctrl + R ）才能看到它只发生 some 次。

但是有很多方法可以每次都发生（或几乎）。我至少找到了：

当您打开Chrome Inspector时，转到elements标签（在任何标签页上都不会发生这种情况！）
当页面中有iframe时

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

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

你会经常得到这个错误。

请注意，例如，当css内部包含<style></style>时，它不会发生。

我发现的常见因素：远程服务器+外部css + iframe +检查器，是所有这些使页面更长的计算。

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

编辑：

我不希望以另一种方式来对齐两个元素。我想要的是理解为什么。

我制作了这个快速GIF，显示如果你从检查员那里移除了右边的浮动，然后再回来，那么错误就会得到解决，Bar就会到达原来的位置。

enter image description here

Answer 1

使用包含两个跨度的外部div（跨度，因为它是内联的）。给一个跨度的位置作为向左浮动而另一个向右浮动。我已经使用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 Bug：忽略了一些CSS规则

1 个答案: