未在Chrome中应用CSS浮动...错误或用户错误？

我试图追踪我的web应用程序中间歇性的Chrome渲染错误。未在Chrome中应用CSS浮动...错误或用户错误？

切换“left”和“none”之间的浮动属性时，Chrome不重新渲染元素。 Firefox和IE的行为如预期。

点击“account-info”div切换浮动值。

var $items = $(".menu > span"); 
 
$("#account-info").on("click", function() { 
 
    if ($items.css("float") === "left") { 
 
     $items.css("float", "none"); 
 
    } else { 
 
     $items.css("float", "left"); 
 
    } 
 
});

#account-info { 
 
    float: right; 
 
    background-color: #eee; 
 
} 
 
.menu .icon { 
 
    display: block; 
 
} 
 
.menu span { 
 
    /*display: block;*/ 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div id="account-info"> 
 
    <div class="menu"> 
 
     <span class="icon">[left-icon]</span> 
 
     <span>User Name</span> 
 
     <span class="icon">[right-icon]</span> 
 
    </div> 
 
</div>

如果指定float:left或float:right参考时display:block;未被注释然后Chrome并再浮起的元素，但我一直的印象，这是不必要的声明display:block下：Implied Block | CSS-Tricks

那么这是Chrome中的一个错误还是我在这里错过了一些东西？

铬版39.0.2171.71m /视窗8.1 64位

来源

2014-12-04 Lucifer Sam

在Chrome中，我似乎在使用或不使用'display：block'的情况下正确地浮动。 – philtune 2014-12-04 21:13:00

在您的问题中发布您的代码。 – j08691 2014-12-04 21:13:10

但是我注意到当所有的浮标都被移除时，''的奇怪叠加。 – philtune 2014-12-04 21:18:31

给#account-info的宽度。

由于它本身是浮动的，因此它会在Chrome中占用其内容的宽度。因此，当您第一次点击时，它会折叠到“用户名”的宽度，并且不会恢复。

来源

2014-12-04 22:45:21 mopo922

左浮动的项目不应包装，除非它们受到任何父元素或视口的约束。在'＃account-info'上设置宽度不应该是必要的。 – 2014-12-06 17:00:23

“不应该” - 也许是这样。但这就是Chrome的行为。添加一个宽度可以修复问题。 – mopo922 2014-12-07 04:50:32

未在Chrome中应用CSS浮动...错误或用户错误？

回答

相关问题