html - 为什么css中用scale缩放之后，虽然内容缩小了，但是占用的空间却没有变化

问题描述

问 题

因为被要求在网页中显示12px以下的字体，但是

-webkit-text-size-adjust:none;

在现在的chrome版本里面没有任何效果，所以我正在采用transform:scale的方法来实现缩小字体的效果。
但是在这个过程中我发现,被缩小后的内容索然整体被缩小了，但是占用的空间却没有任何变化。
现在是这样的，没缩放之前：

这里黄线是我将要缩放的内容
我缩放之后，就变成了这个样子：

可以看到，内容确实缩小了，但是他占用的位置却没有变化。
我没有调整任何边距，只是设置了内容居中。
通过检查发现，缩小后的内容实际渲染的大小已经发生了变化：

但是不知道为什么黄色的内容仍然占用着原来没有缩放之前占用的地方。如果占用的位置缩小了，应该会影响到右边蓝色的部分，蓝色的部分会左移，但是蓝色的部分并没有变化
下面是渲染黄色部分的scss：

.footer-info {
    padding-top: 0.3%;
    padding-left: 0%;
    position: relative;
    left: 0;
    color: white;
    float: left;
    display: inline;
    line-height: 60%;
    transform:scale(0.83,0.83);
  -webkit-transform:scale(0.83,0.83);
  -moz-transform:scale(0.83,0.83);
  -o-transform:scale(0.83,0.83);
  font-size: 12px;
 .text {
 text-align: center;
 position: relative;

}
}

还有渲染蓝色部分的scss：

.footer-sns {
    position: relative;
    display: inline;
    margin-bottom: 1%;
    color: white;
    width: auto;
    padding: 0;

  transform:scale(0.75,0.75);
  -webkit-transform:scale(0.75,0.75);
  -moz-transform:scale(0.75,0.75);
  -o-transform:scale(0.75,0.75);
  font-size: 12px;
}

非常感谢！

解决方案

transform 的所有属性都不改变页面元素的布局。

这篇关于html - 为什么css中用scale缩放之后，虽然内容缩小了，但是占用的空间却没有变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！