gpt4 book ai didi

javascript - Chrome 漏洞 : Some CSS rules ignored

转载 作者:行者123 更新时间:2023-11-28 08:03:23 24 4
gpt4 key购买 nike

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

FooBar 在同一条线上。

但在 Chrome 中,有时,您得到的是: enter image description here

bar不在同一条线上。

它不会每次都发生,所以你可能需要重新加载 (ctrl+R) 很多次才能看到它只发生一些次。

但有办法让它每次都发生(或几乎)。我至少发现:

  1. 打开 Chrome 检查器后,转到 elements选项卡(它不会发生在任何选项卡上!)
  2. 当你有一个 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,显示如果你从检查器中移除 float ,然后再返回,bug 就解决了,Bar首先到达它应该在的地方。

enter image description here

最佳答案

使用包含两个 span 的 Outer div(span 因为它是内联的)。将一个跨度的位置指定为 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>

关于javascript - Chrome 漏洞 : Some CSS rules ignored,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29620530/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com