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

发布于 2025-01-07 02:42:53 字数 1525 浏览 1 评论 0原文

我正在构建一个网页，标题中带有徽标和菜单。当我缩小或放大时，某些菜单项会跳到第二行，而它们本应保留在单行上。这种情况在 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">

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

原文

I am building a webpage with a logo and menu in the header. When I zoom out or in, some menu items jump onto a second row, when they are meant to stay on a single row. This happens in Chrome, but does not happen in Firefox.

To illustrate this, I've taken a snippet of my code. The following HTML and CSS creates a blue box with 8 menu items in it. When I zoom in or out in Firefox there are always 8 menu items on a single row, no matter how many zooms I apply. However, if I zoom out several times in Chrome, sometimes the last menu item will jump to the second row. The row of menu items is changing width relative to the width of the menu box (whereas in Firefox the ratio of widths remains the same).

I think the best way to understand what I'm talking about is to view the following code in Chrome and in Firefox, and zoom in and out several times in both to see what happens.

I want what is happening in Firefox to be replicated in Chrome. Can anyone suggest how I can achieve this?

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

分享到QQ

分享到微博