Chrome浮动右调整大小错误？ [英] Chrome float right resize bug?

问题描述

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

I have an input and a button in a div. When the viewport is wide, the button is floated right and on small screens the button fills the width of the viewport. However, in Chrome when I resize the browser to smaller than the breakpoint and then back again the button stays on its own row. It works as I expect on IE and FF. If I set float: left on the input it works in Chrome too.

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

Here's a fiddle demonstrating the issue: http://jsfiddle.net/kSRvP/

为什么Chrome会以这种方式运作？我猜这是因为Chrome会以某种方式优化重绘周期，并跳过按钮内联的步骤（在删除 display：block 和设置 float：

Why does Chrome behave this way? I'm guessing it's because Chrome optimizes the redraw cycle somehow and skips the step where the button is inline (between removing display: block and setting float: right) but I'm not sure and would like to know if it's a bug or not.

推荐答案

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

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

这篇关于Chrome浮动右调整大小错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！