4

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

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

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

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

4

2 回答 2

1

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

<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 回答