浮动媒体查询后不显示输入：块

Question

使用以下代码时，输​​入应与视口大于320px时的文本位于同一行。它在第一页加载时（在激活媒体查询时）按预期工作，但在视口调整到320px以下后，float: left将不再起作用，即使视口再次放大。

视口＆gt; = 320px时的预期结果

调整视口大小后＆lt; 320像素

将视口调整为＆gt; = 320px

的结果

仅在满足以下条件时才会出现此行为：

• 浏览器是Google Chrome
• Floated元素是input（任何类型）
• float规则在媒体查询中
• Floated元素默认为display: block，未应用媒体查询
• float规则被禁用（通过调整视口大小或在开发工具中）然后再次启用

我在Ubuntu 14.04上使用Chrome 41.0.2272.101（64位）。 Firefox 38.0在同一平台上没有显示该行为。我还没有测试过任何其他浏览器。

＆＃13;

＆＃13;

.text {
  display: inline-block;
}
input {
  display: block;
}
@media only screen and (min-width: 320px) {
  input {
    float: left;
  }
}

＆＃13;

<div class="text">Text</div>
<input type="text">

＆＃13;

＆＃13;

＆＃13;

您可以在此处试用：https://jsfiddle.net/ws2guLrq/1/

Answer 1

这可能是您正在寻找的，请改用$('button').on('click', function(e) { var target = $(this).data('target'); $(target).text('Random String'); // Here's where your code for changing the random strings would go. }); 并切换参数。

max-width

如果我正确理解了您的问题，那么这就是您想要的，我只在Chrome中对此进行了测试。