Chrome浮动右调整大小错误？

Question

我在div中有一个输入和一个按钮。当视口宽时，按钮向右浮动，在小屏幕上按钮填充视口的宽度。但是，在Chrome中，当我将浏览器的大小调整为小于断点，然后再返回时，按钮会保留在自己的行上。它的工作方式与IE和FF一样。如果我在输入上设置了float: left，那么它也适用于Chrome。

这是展示问题的小提琴：http://jsfiddle.net/kSRvP/

来回调整输出窗格的大小以查看错误。

为什么Chrome会以这种方式运行？我猜这是因为Chrome以某种方式优化了重绘周期并跳过按钮内联的步骤（在删除display: block和设置float: right之间）但我不确定并且想知道它是否是不管是不是。

Answer 1

如果你交换输入和按钮的位置，你会发现“bug”已经消失了。但是我不知道的原因。

<div class=wrap>
    <div class=row>
        <input><button>Button</button>
    </div>
</div>

http://jsfiddle.net/kSRvP/21/

Answer 2

增加按钮的特异性可以解决这个问题。例如，将css中的按钮样式更改为：

.row button {
    float: right;
}

我认为Chrome可能会处理类似的特殊情况，并使用最后一个作为媒体查询。