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

Question

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

And*_*rew 3 html css firefox google-chrome

我正在构建一个标题和菜单中的网页.当我缩小或放大时,一些菜单项会跳到第二行,当它们要保持在一行上时.这种情况发生在Chrome中,但在Firefox中不会发生.

为了说明这一点,我拍了一段我的代码.以下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">

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

And*_*rew 5

添加白色空间:nowrap; #zoom在缩放过程中将所有菜单项保存在一行中,这意味着我的网站现在看起来没问题了.但是,chrome和firefox在缩放下仍然表现不同,但我想这只是开发人员必须允许的内容.

归档时间：	13 年，9 月前
查看次数：	5116 次
最近记录：	13 年，9 月前