html - 为什么 webkit 的(Safari/Chrome)页面缩放在缩小时会破坏流畅的布局

标签 html css xhtml safari

我有一个多年来一直采用流畅布局的网站。那就是正文的文本大小是定义的,从那里所有其他大小都是相对的,并根据 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 中,它的工作原理类似于缩小然后中断的两个步骤。缩小没有什么用,所以我想这更像是一个学术问题。我想了解发生了什么。

谢谢。

最佳答案

这可能是因为某些默认的浏览器样式基于 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可能太具体了。

关于html - 为什么 webkit 的(Safari/Chrome)页面缩放在缩小时会破坏流畅的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6167945/

相关文章:

php - 突出显示事件链接

html - 无边距,全宽两列 View HTML

javascript - 如何在javascript中验证变量的数据类型?

html - 图片下方的文字位于其他图片的顶部?

html - 中心的 Bootstrap 导航 Logo

html - chrome 中忽略了 flex 元素内的最小高度

html - CSS - 背景图像被截断

html - 文本围绕两个内联对象(位于两行)

css - 图像翻转(Instagram Feed webapp)

css - IE7 是否有某些 CSS 属性选择器的问题?