为什么 webkit 的（Safari / Chrome）页面缩放会在缩小时打破流畅的布局

Question

我有一个多年来一直采用流畅布局的网站。也就是说，正文的文本大小是定义的，并且从那里所有其他大小都是相对的，并以 em 的形式指定。这使得页面在 IE 5.5 以上、旧 FF 版本等上完全可扩展。如今它不再那么重要了，因为在现代浏览器中，页面缩放与文本缩放相反。页面缩放适用于我的所有浏览器 IE、FF、Opera，放大也适用于基于 Webkit 的浏览器。但是缩小（小于 100%）会破坏布局，我不明白为什么会这样。

这是example page from the page as it stands to try this:

为什么在 Safari（我使用 5.0.5 测试）和 Chrome 中缩小时布局会中断？在 Chrome 中，它适用于缩小然后中断的两个步骤。缩小几乎没有用，所以我猜这更像是一个学术问题。我想了解发生了什么。

谢谢。

Answer 1

这可能是因为某些基于 px 而不是 ems 的默认浏览器样式。例如，如果您在 Safari 中使用 webkit 检查器，<ol class="navi_rechts"> 有一个包含 -webkit-padding-start: 40px 的用户代理样式表。在任何混乱的元素上使用 CSS 重置或检查类似的东西可能是值得的。

编辑这也可能是您的某些值的舍入问题。我不确定 Safari 会查看多少个小数位，但我猜 h1.navi_parent_rechts 上的 padding: 0.46154em 0em 0em 0.92308em; 之类的内容可能太具体了。