li：悬停在浮动包装内的宽度上增长

Question

我发现了一个令人困惑的事情（只有Safari和Chrome才会发生）。首先是小提琴：http://jsfiddle.net/k8ypwqbd/

<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;
}

因此，如果您将第一个li元素悬停，则不会发生任何事情（绿色背景颜色除外）。如果你悬停第二个li元素（最宽的元素），列表的宽度增长（在我看来）没有理由。 并且它在剩下的时间内保持在那个宽度。

我不知道为什么会这样。这是一个错误吗？

以下是截图：

Answer 1

到目前为止，我的解决方法是给浮动元素一个固定的宽度。

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

是否有另一种动态宽度解决方案？