Question

首先，我读过其他类似的帖子。什么都没有帮助。

我有一个像素完美的网站，没有任何百分比左右。当我缩小它在Firefox和Edge中工作得很好，但在chrome中，当它达到25％时，项目不适合他们的父项。

    <div id="main_core_content">
        <div class="box_container">
            <div class="box_container_content">

在最后一个div（ box_container_content ）中，我有三列中的项目列表（li）（正确浮动）。所以我的意思是没有合适的是，例如，当你达到25％的变焦时，漂浮的物品留在他们的位置，但项目列表从底部溢出。我做了很多事情，设置宽度，最大高度等等，但最后没有结果。顺便说一句，弹出模式窗口绝对定位。

更简单的代码：

#main {
  max-width: 800px;
  height: 600px;
  background: #9b9672;
  color: white;
  padding: 50px 20px 20px 20px;
}

#wrapper {
  position: relative;
  border: 1px solid orange;
  background: white;
  color: black;
}

<div id="main">
  <div id="wrapper">
    <div id="dicts1">
      <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
        <li>Beer</li>
        <li>Cider</li>
        <li>Distilled (liquor)</li>
        <li>Hard soda</li>
        <li>Wine</li>
        <li>Barley</li>
        <li>Hot drinks</li>
        <li>Mixed drinks</li>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
        <li>Beer</li>
        <li>Cider</li>
        <li>Milk</li>
        <li>Beer</li>
        <li>Cider</li>
        <li>Distilled (liquor)</li>
        <li>Hard soda</li>
        <li>Wine</li>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
        <li>Beer</li>
        <li>Cider</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

Chrome似乎仍然存在绝对单位问题。虽然所有主流浏览器都会重新计算绝对单位以使页面内容符合缩放级别，但看起来有些浏览器仍然做得不好。（我现在只能在Mac上测试所有主流浏览器--Opera也有同样的错误......因为它使用几乎相同的渲染引擎，所以不应该感到惊讶）

尽可能使用相对单位而不是绝对单位总是明智的。经常提到（例如here和here）简而言之，em更适合可访问性，因为缩放级别的问题较少。

您还可以看到如何使用em修复您的示例：

#main {
  max-width: 800px;
  height: 600px;
  background: #9b9672;
  color: white;
  padding: 50px 20px 20px 20px;
}

#wrapper {
  position: relative;
  border: 1px solid orange;
  background: white;
  color: black;
}

ul {
  margin-left: 1em;
  padding-left: 1em;
}

/* absolute values which still would break
ul {
  margin-left: 15px;
  padding-left: 15px;
}
*/

<div id="main">
  <div id="wrapper">
    <div id="dicts1">
      <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
        <li>Beer</li>
        <li>Cider</li>
        <li>Distilled (liquor)</li>
        <li>Hard soda</li>
        <li>Wine</li>
        <li>Barley</li>
        <li>Hot drinks</li>
        <li>Mixed drinks</li>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
        <li>Beer</li>
        <li>Cider</li>
        <li>Milk</li>
        <li>Beer</li>
        <li>Cider</li>
        <li>Distilled (liquor)</li>
        <li>Hard soda</li>
        <li>Wine</li>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
        <li>Beer</li>
        <li>Cider</li>
      </ul>
    </div>
  </div>
</div>

Chrome缩放级别为25％会破坏页面的某些部分

1 个答案: