li：懸停在寬度內生長的浮動包裝

我發現一個令人困惑的事情（只發生在Safari和Chrome上）。首先小提琴的：http://jsfiddle.net/k8ypwqbd/li：懸停在寬度內生長的浮動包裝

<ul> 
    <li>Item 1</li> 
    <li>Item 2 Item 2</li> 
</ul> 

ul { 
    float: left; 
    color: red; 
    border: 1px solid black; 
} 
ul li:hover { 
    background-color: green; 
}

因此，如果您將鼠標懸停在第一鋰元素，沒有任何反應（除了綠色背景色）。如果你懸停第二個元素（最寬的元素），那麼列表的寬度會增加（在我看來）沒有理由。而且它始終保持這種寬度。

我不知道爲什麼會發生。這是一個錯誤嗎？

這裏是一個屏幕截圖：

enter image description here

來源

2014-08-28 Fabic

哪個版本？在鉻最新工作正常。 – 2014-08-28 07:58:55

我已經測試過你的小提琴和兩個li的工作方式相同（將背景更改爲綠色懸停）可以分享問題的截圖嗎？ – emmanuel 2014-08-28 08:02:47

Safari 7.0.6和Chrome 37.屏幕截圖被添加到問題文章中。 – Fabic 2014-08-28 08:18:10

我的解決方法，到目前爲止是給所述浮動元件的固定寬度。

ul { 
    float: left; 
    color: red; 
    border: 1px solid black; 
    width: 150px; 
}

是否有另一種動態寬度解決方案？

來源

2014-08-28 07:56:18 Fabic

li：懸停在寬度內生長的浮動包裝

回答

相關問題