Chrome上的奇怪CSS行爲，如框

Question

我在Chrome上經歷了這種奇怪的行爲（我測試了Windows和Linux版本）。我也在Firefox上測試過它，但它在這方面正常工作。

我有一個WordPress Like框顯示在Wordpress端小部件。 （它使用官方的Facebook插件，但如果它的輸出有問題，我可以自己輕鬆更改它）。實際上它包含了一個iFrame。

1. 一個奇怪的白色填充出現在小部件底部的Facebook徽標下方。奇怪的是，當我將鼠標懸停在只改變其顏色的標題上時，框會突然自動將高度調整爲正確的高度。你可以看到它here右邊的Facebook Like Box小部件（從頂部開始的第三個框）有一些白色填充。將鼠標移動到「Like Us？」上標題，它突然調整高度到正確的。

2. 當用戶導航到另一個頁面並返回到頁面時，會出現更嚴重的問題。打開該頁面後，地址欄中會顯示另一個網址，例如www.google.com。加載完成後，只需點擊Chrome瀏覽器的「返回」按鈕即可。你會突然看到Facebook Like Box不像之前渲染的那樣，但它呈現在一個更淺的盒子裏，醜陋的滾動條出現。

發生這種情況的原因是什麼？它是我第一次遇到這些看似無關的行爲發生的奇怪問題（懸停鏈接並點擊返回）

Answer 1

據我所見，在您的servicebox框（包含類似框）中，您有一個div與一類serviceheading有float: left;。我想這可能會導致你麻煩，因爲servicebox本身沒有任何屬性來包含浮動。您可以嘗試添加clearfix解決方案到.servicebox或嘗試添加overflow: hidden;作爲快速修復。這可能會解決你的第一個問題。

就第二個問題而言。我會嘗試添加一些屬性來檢查它們是否有幫助。

• 使.fb_iframe_widget清楚浮動標誌由clear: left;它 將使這個塊永遠是下的標誌。
• 使.fb_iframe_widget一個塊元素display: block;（正確的 現在 - 它是inline-block）。它會自動給它的寬度 的父元素（303px）
• 做出以下選擇.fb_iframe_widget iframe並添加 max-width: 100%;它。這些樣式將確保iframe 不會變大 - 因此滾動按鈕將會消失可能 消失。

希望它會有所幫助。

UPDATE

出於某種原因，當返回按鈕被按下時.fb_iframe_widget內<span>漸漸設置爲高度和0像素的寬度。下面解決這個問題，雖然它有點黑客，高度和寬度都必須硬編碼：

.fb_iframe_widget iframe 
{ 
    height: 230px !important; 
    width: 300px !important;  
} 

.fb_iframe_widget span 
{ 
    height: 230px !important; 
    width: 300px !important;  
}