4

divに入力とボタンがあります。ビューポートが広い場合、ボタンは右にフロートし、小さな画面ではボタンがビューポートの幅を埋めます。ただし、Chrome では、ブラウザーのサイズをブレークポイントよりも小さく変更してから再度戻すと、ボタンは独自の行にとどまります。IE と FF で期待どおりに動作します。入力を設定float: leftすると、Chrome でも機能します。

問題を示すフィドルは次のとおりです。http://jsfiddle.net/kSRvP/

出力ペインのサイズを前後に変更して、バグを確認します。

Chrome がこのように動作するのはなぜですか? display: blockChromeが再描画サイクルを何らかの形で最適化し、ボタンがインラインであるステップ（削除と設定の間）をスキップするためだと思いますfloat: rightが、それがバグかどうかはわかりません。

4

2 に答える 2

1

入力とボタンの位置を交換すると、「バグ」がなくなったことがわかりますが、その理由はわかりません。

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

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

于 2013-03-11T09:54:22.137 に答える
0

ボタンの特異性を上げると、これが修正されます。たとえば、css のボタン スタイルを次のように変更します。

.row button {
    float: right;
}

Chromeはおそらく同様の特異性を扱い、最後のものをメディアクエリとして使用していると思います.

于 2012-12-18T14:52:03.963 に答える