未在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浮動...錯誤或用戶錯誤？

回答

相關問題