时间戳

首页 > 解决方案 > flexbox 下的缩放转换在 Chrome 和 Firefox 中呈现不同

css - flexbox 下的缩放转换在 Chrome 和 Firefox 中呈现不同

问题描述

我想将一个 div 居中，然后将其缩放（通过 transorm:scale）更大。

我使用 flexbox 使 div 居中。我想使用整个视图空间，所以我给 HTML 和 BODY 元素设置了 100% 的高度。

在 Firefox 中，它呈现得很好。然而，在 Chrome 中，内部 div 的缩放似乎会导致 BODY 元素溢出，并出现垂直滚动条。

如果您在 Chrome 和 Firefox 中运行以下代码段，您会注意到不同之处：垂直滚动条仅在 Chrome 中出现。我想让它在 Chrome 中看起来就像在 Firefox 中一样（没有滚动条）。

谁能帮我解决这个问题？

html {
  height: 100%;	  
  background-color: black;     
}

body {
  height: 100%;
  display: flex;
  overflow: auto;
  margin: 0;
  background-color: antiquewhite;
}

div {
  height: 50px;
  width: 50px;
  margin: auto;
  transform: scale(1.7);
  background-color: blue;
}
<html>
  <body>
    <div>
    </div>
   </body>
 </html>

标签： cssgoogle-chromefirefoxflexboxcss-transforms

解决方案

而不是 margin 考虑align-items/justify-content使元素居中。Chrome 似乎也扩大了导致这个问题的边距：

html {
  height: 100%;
  background-color: black;
}

body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background-color: antiquewhite;
}

div.box {
  height: 50px;
  width: 50px;
  transform: scale(1.7);
  background-color: blue;
}
<div class="box">
</div>

推荐阅读