html - 谷歌浏览器在缩放时弄乱了导航菜单

Question

直到最近，这在 google chrome 中都可以正常工作，并且可以在所有其他浏览器中使用。

出于某种原因，当我使用 google chrome 放大和缩小时，顶部导航按钮上的边框会变形。每条线之间出现一条黑线。此外，我最左边的按钮在缩放时换到下一行。任何人都可以提供有关为什么会发生这种情况的任何见解吗？

任何人都可以提供有关如何防止品牌标签在缩放时移动这么多的任何提示吗？我使用 em 作为字体大小，但我知道无论它会移动什么。我可以将整个 ul 居中，但是有没有更简洁的方法来隐藏它？

http://dev.gerhardsappliance.com/

Answer 1

似乎很多问题都与您使用的图像数量有关。您可以通过拆分图像和使用 CSS 为您工作来极大地简化您的菜单。

例如，如果不是使用背景图像运行 .topNavC，而是使用背景图像运行 li 本身（甚至整个 ul）并使用 .topNavL 和 .topNavR 覆盖，跨度之间的线将不可见需要时背景。您可以使用两个甚至一个图像来完成此菜单外观。

当您缩放时，所有这些图像都被强制设置为它们不一定适合的像素比率。无论如何，我都会将 CSS 用于蓝色边框和白色背景，而不是图像。