Chrome浮动正确调整大小错误？答案

【问题标题】：Chrome float right resize bug?Chrome浮动正确调整大小错误？
【发布时间】：2013-03-11 18:04:44
【问题描述】：

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

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

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

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

【问题讨论】：

我遇到了完全相同的问题。您设法解决了这个问题吗？
@vrutberg 我不确定，但我想我使用了左浮动。您可以尝试肖恩的解决方案，它似乎有效。

标签： css google-chrome responsive-design

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

.row button {
    float: right;
}

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

【讨论】：

这非常有趣！