css - Safari 中的样式问题

Question

我已经在网站上工作了一段时间，在 Chrome、Firefox 和 IE 中进行了大部分测试。在收尾时，我尝试在 Safari(在 Mac、iPad 和 iPhone 上)中查看它。我注意到某些元素在 Safari 中放错了位置。我试过使用 CSS，但运气不好。

可以在这里查看页面 - http://staging.princewebdesigns.com/gallais/

具体查看 Logo (被压入横幅)、横幅中标语的字体(环绕超出横幅并向左延伸太远)、“特色作品”标题环绕、元素名称环绕, 和页脚环绕。

这是页面的外观 - http://staging.princewebdesigns.com/gallais/images/chrome.png

要查看它在我的 iPhone 上的外观，请将上面的链接更改为 .../iphone.png

感谢任何帮助。

Answer 1

问题是(我认为)您放大了浏览器的文本。

我在 Mac OS 10.7.3 上的 Safari 5.1 中加载了该页面，最初加载正常。当我正常缩放时，布局保持不变。一旦我尝试仅缩放文本，布局就会按照您的描述中断。

话虽如此，您可能需要认真考虑如何在用户确实增加文本大小的情况下使布局更加“灵活”。例如，在 IE 中，默认缩放是整页缩放，但除了缩放之外，用户仍然可以增加文本大小。在这些情况下测试您的布局以确保它不会完全脱轨是值得的。我并不是说它必须完美，但仍然清晰可辨。

一个想法是尝试不同的单位。我发现当使用相对测量值声明水平长度(例如 margin-left)时有效，但是当声明垂直长度时，(例如 margin-top)使用像素测量值效果更好。对于 super 关键的元素，比如网站标志，positon:absolute 可能是一个很好的尝试途径。