CSS - 标志与 Chrome / Safari 不同

Question

我的徽标在 Safari 和 iPad 的 Chrome/Safari 上表现得很奇怪。

问题是高度不同，在 Safari/iPad 上会被挤压。

我真的不知道如何跟踪 Safari 的问题，希望得到直接的回答或一些指导。

我主要使用 Chrome，如果您有任何关于 Safari 问题跟踪问题的提示 - 将不胜感激。

非常感谢！ =)

Answer 1

使用 Safari 的 Element Inspector 很容易解决问题。

单击徽标时，您会同时看到 HTML 和 CSS。当禁用一些 CSS 属性时，这是不安全的常见原因，我发现禁用以下样式可以解决您的问题：

Layout.css

规则 #296

#Top_bar #logo img { vertical-align: middle; /* max-height: 100%; */ }

最大身高是你的麻烦制造者。

另外，一点个人品味：避免在浏览器中调整图像大小。它将缺乏性能和视觉质量。

徽标很好看，但调整大小后会变得模糊。