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

时间:2011-05-29 13:18:27

标签: html css xhtml safari

我有一个多年来流畅布局的网站。这就是定义了正文的文本大小,从那里所有其他大小都是相对的,并以ems的形式指定。这使得页面在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中,它适用于缩小然后中断的两个步骤。缩小几乎没有用,所以这更像是一个学术问题。我想了解发生了什么。

感谢。

1 个答案:

答案 0 :(得分:2)

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

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