html - 为什么 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 重置或检查此类内容可能是值得的。

编辑 这也可能是您的一些值(value)观的舍入问题。我不确定 Safari 会查看多少个小数位，但我猜是像 padding: 0.46154em 0em 0em 0.92308em; 这样的东西在 h1.navi_parent_rechts可能太具体了。