html - IE11 - 缩小到 50% 时出现布局问题

Question

我们使用 Zurb Foundation 4 和 5 开发的几个网站在 IE11 上缩小到不同级别时表现出奇怪的(边缘情况)行为。例如，使用 one website当在 IE11 上缩小 < 63%(窗口最大化 IE11/Win7 在 1440w 屏幕上运行在 VMWare Fusion 上；里程可能会有所不同，因此缩小小于 50% 以便更有可能看到行为)，主要内容 div 会偏离中心。 block 偏离中心的阈值似乎与缩放级别与窗口宽度有某种关系。

正常布局:

缩小时在 IE11 上显示布局问题:

这些网站已经在各种设备和浏览器(Chrome、Firefox、Safari、Opera、iOS Safari、Android Chrome、Android FF)上进行了测试，所有网站都可以正确呈现和缩小，没有任何问题。有趣的是，即使在 IE8 上，缩小到相似的级别也不会破坏布局。

这是一个奇怪的 IE11 错误吗？我认为它有点极端，因为我不认为很多人会经常缩小到那种程度，但这有点好奇，因为它不会出现在 IE8 上，我只在 Foundation 上观察到它4 个以上的网站。

Answer 1

我在 IE11 中快速查看了一下，当我缩小到 50% 时可以重现该问题。

div#contentContainer 将 max-width 设置为 62.5rem。将该值更改为 100rem，面板将适本地居中对齐到屏幕。

您可能需要考虑从 rem 值切换到 em。