Chrome 和 Firefox 处理缩放的方式不同。如何在我的 CSS 中处理这个问题答案

【问题标题】：Chrome and Firefox handle zoom differently. How to deal with this in my CSSChrome 和 Firefox 处理缩放的方式不同。如何在我的 CSS 中处理这个问题
【发布时间】：2012-02-18 21:50:43
【问题描述】：

我正在构建一个标题中带有徽标和菜单的网页。当我缩小或缩小时，一些菜单项会跳到第二行，而它们本来应该留在单行上。这发生在 Chrome 中，但不会发生在 Firefox 中。

为了说明这一点，我对我的代码进行了 sn-p。下面的 HTML 和 CSS 创建了一个包含 8 个菜单项的蓝色框。当我在 Firefox 中放大或缩小时，无论我应用多少次缩放，单行总是有 8 个菜单项。但是，如果我在 Chrome 中多次缩小，有时最后一个菜单项会跳到第二行。菜单项的行相对于菜单框的宽度正在改变宽度（而在 Firefox 中，宽度的比率保持不变）。

我认为理解我在说什么的最好方法是在 Chrome 和 Firefox 中查看以下代码，然后在两者中放大和缩小几次以查看会发生什么。

我希望将 Firefox 中发生的事情复制到 Chrome 中。谁能建议我如何实现这一目标？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
  <style>
  #header {
  width: 1000px;
  margin: 0 auto;
  height: 96px;
  position: relative;
  background: blue;
  } 
  #menu {
  display: block;
  position: absolute;
  left: 119px;
  }
  #menu li {
  display: block;
  float: left;
  padding: 0 8px 0 14px;
  text-transform: uppercase;
  letter-spacing: -1px;
  font: 14px/27px Arial, Helvetica, sans-serif;
  background-color: transparent;
  }
  </style>
</head>

<body>
  <div id="header">
    <div id="menu">
      <ul>
      <li>menu item 1</li>
      <li>menu item 2</li>
      <li>menu item 3</li>
      <li>menu item 4</li>
      <li>menu item 5</li>
      <li>menu item 6</li>
      <li>menu item 7</li>
      <li>menu item 8</li>
      </ul>
    </div>
  </div>
</body>

</html>

【问题讨论】：

为获得最佳效果，请包含指向“现场演示”的链接（例如在 jsfiddle 或类似网站上）。
嗯，你的 html 代码无效。您必须将<li>s 包装在<ul> 中。
@pst：抱歉，我之前从未发布过 HTML/CSS 问题，也从未使用过 jsfiddle。已在此处添加：jsfiddle.net/MLTmE
@elclanrs：好的，我添加了
我可能会对此感到不满，但是花费大量时间试图让您的网站在不同的浏览器“缩放”功能下运行是浪费时间。它永远不会好看。如果网站比几个图像和按钮（如谷歌开始页面）更复杂，我从未见过能很好地“扩展”的网站。

标签： html css firefox google-chrome

【解决方案1】：

添加空格：nowrap； to #menu 在缩放期间将所有菜单项保持在一行中，这意味着我的网站现在看起来还不错。然而，chrome 和 firefox 在缩放下仍然表现不同，但我想这只是开发人员必须允许的。

【讨论】：

我想是的，我误解了你原来的问题，但我想缩放是每个浏览器都固有的，因为很可能没有缩放标准。
我的救星！ +1，一千次 +1！

【解决方案2】：

我通过在所有 CSS 代码的顶部添加 CSS 重置来解决您的问题。

http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/

【讨论】：