代码之家 › 专栏 › 技术社区 › Nadav

flexbox下的缩放转换在chrome和firefox中的呈现方式不同

css-transforms flexbox firefox google-chrome css

Nadav · 技术社区 · 7 年前

我想将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>

1 回复 | 直到 7 年前

Temani Afif 7 年前

而不是保证金 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>

推荐文章

JWWalker · CSS的resize属性可以用来调整flex列宽吗?

1 年前

Sidaqpreet Singh · 为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

1 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

1 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

1 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

1 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

1 年前

coder · 边界半径不适用于容器元素

1 年前

user9026 · 项目登录页面(freecodecamp)定价设计

1 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

1 年前