我使用 Flex 布局来渲染具有 3 个大小均匀的列的容器 div。它的工作原理正如我所期望的那样，直到我应用比例变换。当容器缩小时，内容框之间会出现细小的间隙。该问题发生在 MacOS Chrome 和 Safari 上，但不会发生在 Firefox 上。我相信我看到了渲染错误，但想知道是否有人有解决方法的想法。
这是一个非常简化的示例，演示了 Chrome 中的问题：
body {
background: black;
margin: 0;
}
.scale {
transform: scale(0.703125);
}
.container {
display: flex;
width: 600px;
height: 200px;
}
.column {
flex-grow: 1;
background:#ff0000;
}
.column:nth-child(2) {
background: #ff3333;
}
<div class="container scale">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
考虑解决 CSS 框阴影的问题。
这是一个使用的示例spread-radius的值box-shadow财产。
body {
background: black;
margin: 0;
}
.container {
display: flex;
height: 200px;
}
.column {
flex-grow: 1;
background: #ff0000;
}
.scale {
transform: scale(0.703125);
overflow: hidden; /* new */
}
.scale>div:nth-child(2) {
box-shadow: 0 0 0 1000px #ff0000; /* new */
}
.column:nth-child(2) {
background: orange; /* easier to see */
}
<div class="container scale">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
以下是该方法如何工作的详细说明：
- 将鼠标悬停在子容器上时，更改父容器的背景颜色（仅限 CSS） https://stackoverflow.com/q/39374918/3597276
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
