每次我旋转 iPhone（或 Safari 窗口大小越过断点）时，HTML 元素都会增长

Question

我已经复制了一个我认为是最小（或接近它）示例的问题。你可以在这里看到它：http://nyh.name/walker.html

（如果链接失效，因此源代码很容易查看，完整的 HTML 和 CSS 在本文末尾。）

如果我在 iPhone 6 上以纵向（375“像素”宽度）查看此页面，然后将其旋转为横向（667“像素”宽度），“foo”元素会突然获得大量顶部填充。如果我使用 Safari 的 Remote Web Inspector，“盒子模型”视图会将该区域的颜色显示为 填充，尽管填充值都显示为“-”。

让这个真正有趣的是，如果我将它旋转回纵向，它会保留（一些）填充。如果我不断来回旋转它，它就会不断增长。

我可以通过打开页面并在断点上来回移动窗口宽度来在 Safari（OS X 10.10.2 Yosemite 上的 8.0.3）中重现这一点。您可能需要打开停靠在右侧的 Web Inspector 才能使视口足够窄：

关于如何解决、缓解或解决此问题的任何想法？ （假设我想要不同的字体大小和display: table-cell。）

完整的 HTML 和 CSS：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Repro</title>
  <style>
    @media (min-width: 451px) {
      body {
        font-size: 100px;
      }
    }

    .wrapper {
      display: table;
    }

    .foo,
    .bar {
      display: table-cell;
    }

    .foo {
      background: blue;
      font-size: 20px;
    }

    .button {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="foo">
      foo
    </div>
    <div class="bar">
      <button class="button">
        bar
      </button>
    </div>
  </div>
</body>
</html>

Answer 1

将body标签中的font-size改为较小的值即可解决。