Fatal编程技术网
  • javascript/
  • Javascript Chrome错误：一些CSS规则被忽略

Javascript Chrome错误：一些CSS规则被忽略

javascript html css google-chrome iframe

Javascript Chrome错误：一些CSS规则被忽略,javascript,html,css,google-chrome,iframe,Javascript,Html,Css,Google Chrome,Iframe,我希望我可以共享一些沙盒（JSFIDLE），但是css必须在外部加载才能发生错误 您可以很容易地重新创建它，但是它必须是远程的，并且带有外部样式表。就像在生产时一样 HTML: <head> <meta charset="utf-8"> <link rel="stylesheet" type='text/css' href="style.css"> </head> <body> <div class='fo

我希望我可以共享一些沙盒（JSFIDLE），但是css必须在外部加载才能发生错误

您可以很容易地重新创建它，但是它必须是远程的，并且带有外部样式表。就像在生产时一样

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>
使用此代码，您应该具有以下功能：

↑ 
Foo
和
Bar
在同一行上

但在Chrome中，有时您会得到：

↑ <代码>栏不在同一行上

它不是每次都发生，因此您可能需要多次重新加载（ctrl+R）才能看到它只发生几次

但是有办法让它每次都发生（或者几乎每次都发生）。我发现至少：

  • 当您打开Chrome Inspector时，会转到
    元素
    选项卡（在任何选项卡上都不会发生这种情况！）
  • 当页面中有
    iframe
    时
    • 因此，如果添加一个iframe，例如：

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

    Foo
酒吧
    你会经常遇到这种错误

    请注意，例如，当css内部包含在
    中时，不会发生这种情况

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

    你对这种情况发生的原因以及如何预防有什么想法吗

    编辑：

    我不想用另一种方法来对齐两个元素。我想要的是了解原因。

    我制作了这张快速的GIF图，显示如果您从检查器中正确地删除了浮动，然后又重新删除，错误就被解决了，
    Bar
    得到了它本来应该位于的位置

    使用包含两个跨距的外部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>

    .foo{
浮动：左；
}
.酒吧{
浮动：对；
}
#海德尔迪夫{
宽度：100%；
高度：20px；
}
福
酒吧
    为什么一个是浮动的，另一个是内联的？为什么不把float:left/
    float:right
    放在第一位呢？因为这是一个真实用例的抽象，也是我能找到的最简单的用来显示bug的标记。谢谢你，但我很抱歉，我似乎还不太清楚，但我不想让这两个元素对齐。您在这里看到的标记实际上也适用于对齐两个元素。它适用于所有浏览器，甚至是Chrome，但有时不适用，这就是我的问题所在，这些被称为竞争条件，很难调试，这也可能因为DOM一次又一次的加载而发生。 
    .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>