我有一个带有 1px 边框的元素和一个具有背景颜色的子元素,当我将浏览器的缩放比例缩小到 70-80% 时,会导致父元素的边框消失。
我注意到 PC 上的 Chrome 和 IE11 中会出现这种情况,但 MacBook Pro 上的 Chrome 中不会出现这种情况。
这是问题的屏幕截图:
![enter image description here](https://i.stack.imgur.com/1yxB1.png)
下面是示例代码:https://codepen.io/richfinelli/full/yvpRxW/
<section class="card__container">
<header class="card__header">
<h1>Title</h1>
</header>
<div class="card__value">850</div>
<footer class="card__footer">Lorem ipsum dolor sit amet.</footer>
</section>
CSS/SCSS:
.card__container {
border: 1px solid black;
display: flex;
flex-direction: column;
width: 300px;
margin: 10px auto;
align-items: stretch;
font-family: "source code pro";
color: darken(#cccccc, 60%);
}
.card__header {
background-color: lighten(hotpink, 10%);
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
h1 {
font-size: 2rem;
}
}
.card__value {
align-self: center;
padding: 50px 0;
color: hotpink;
font-size: 2rem;
}
.card__footer {
padding: 10px;
font-family: Arial;
font-style: italic;
font-size: .8rem;
background-color: lighten(blue, 45%);
}
试图找出为什么我的边框消失了?
对我来说,这听起来像是由于浏览器的子像素演算而导致的数字舍入问题。但是,我确实在 Chrome/Mac 上看到了这个问题,如果您调整不同的缩放级别和视口宽度,您可以通过不同的方式看到问题的体现:
铬/苹果机
125% 缩放/1196 像素视口
页眉和页脚背景与左边框之间的间隙:
铬/苹果机
90% 缩放/1181 像素视口
页眉和页脚背景与右边框重叠:
一个不影响设计的修复是使用伪元素中的定位来创建边框:
.card__container {
position: relative; // ADDED
// border: 1px solid black; // REMOVED
display: flex;
flex-direction: column;
width: 300px;
margin: 10px auto;
align-items: stretch;
font-family: "source code pro";
color: darken(#cccccc, 60%);
// ADDED
&::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid #000;
}
}
![90% Zoom / 1181px viewport](https://i.stack.imgur.com/9B3KT.png)
代码笔:https://codepen.io/danbrady/pen/QQYyzM(在 IE11、Chrome(Mac 和 Win7)、Firefox 和 Safari 中测试。
虽然这是更多的代码,而且不可否认,有点古怪,但它并没有改变最初的设计意图。另外,您可能会考虑将其抽象为 mixin 或单独的实用程序类。
(P.S.从你的博客文章。你激励我不要潜伏(至少今天)。 :^)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)