使用媒体查询更改内联块和浮动的意外行为

Question

我正在创建一个包含三个元素的响应式页面。左边的两个元素设置为 display:inline-block，因此它们将并排显示。第三个元素设置为 float:right，因此它将与页面右侧对齐，而不是与其他两个元素内联。我有一个 CSS 媒体查询，当 window 宽度小于 600 像素时，它使所有三个元素垂直显示。

当我将 window 缩小到小于 600px 然后再将其拉宽时，页面顶部不显示第三个元素。它漂浮在页面的右侧，但顶部有 space，就好像它位于其他两个元素的下方。

我在 Chrome 43 和 Safari 7.1.6 中的 Mac 上看到了这种行为，但在 Firefox 38.0.5 中没有。

为什么会这样？
有什么办法吗？

我知道还有其他方法可以构造此布局来避免此问题。与其他方法相比，我更感兴趣的是为什么会出现这种行为，尤其是因为它似乎只发生在特定的浏览器中。

下面是问题的说明：

请看下面的演示。使用 "Full page" 按钮可以调整 window 的大小来测试媒体查询。

div#image {
  display: inline-block;
  vertical-align: middle;
  width: 30%;
}
div#image img {
  max-width: 100%;
}
div#caption {
  display: inline-block;
  width: 20%;
}
div#text {
  float: right;
  width: 30%;
}
div#text p {
  margin: 0 0 1em;
}

@media only screen and (max-width: 600px) {
  
  div#image,
  div#caption {
    display: block;
    width: auto;
  }
  div#text {
    float: none;
    width: auto;
  }
  
}

<div id="image">
  <img src="http://lorempixel.com/400/300/abstract/3/" alt="">
</div>
<div id="caption">
  Caption goes here.
</div>

<div id="text">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat.</p>
  <p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p>
  <p>Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem.</p>
</div>

Answer 1

这是因为 float:none - 出于某种原因*当你向后伸展时它仍然卡住 - 只是不要使用它，你会没事的。 div 保持浮动在列中可能不会有任何区别。

*（我怀疑在这种情况下浏览器可能会选择忽略恢复规则以节省资源，因为这种调整大小主要是由开发人员出于测试目的完成的，而不是由普通用户完成的——但这只是猜测)

使用媒体查询更改内联块和浮动的意外行为

Unexpected behavior changing inline-block and float with media query

css

css-float

media-queries

responsive-design