Chrome float right resize bug?

问题

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.

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

Resize the output pane back and forth to see the bug.

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.

回答1:

if you swap the position of input and button ,you will find the "bug" has gone.but the reason i dont kown.

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

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

回答2:

Increasing the specificity for the button fixes this. For example change your button style in your css to this:

.row button {
    float: right;
}

I think that Chrome maybe dealing with a similar specificity and using the last one being your media query.

来源：https://stackoverflow.com/questions/13935255/chrome-float-right-resize-bug