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

Question

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

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

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

为什么会这样？ 有什么补救措施吗？

我意识到还有其他方法来构建此布局以避免此问题。我更感兴趣的是为什么会出现这种行为而不是替代方法，特别是因为它似乎只发生在特定的浏览器中。

以下是该问题的说明：

请参阅下面的演示。使用“整页”按钮，以便您可以调整窗口大小以测试媒体查询。

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不会产生任何影响。

*（我怀疑浏览器可能会选择忽略在这种情况下恢复规则以节省资源，因为这种调整大多是由开发人员进行测试，而不是由普通用户完成 - 但这只是推测）< / p>