我有一个带有1px边框的元素和一个具有背景颜色的子元素,当我将浏览器的缩放缩小到70-80%时,会导致父元素的边框消失。
我注意到它发生在PC上的Chrome和IE11中,而不是MacBook Pro上的Chrome中。
这是问题的截图:
下面是示例代码: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上看到了问题,如果您调整不同的缩放级别和视口宽度,您可以通过不同的方式查看问题清单:
Chrome / Mac 125%缩放/ 1196px视口页眉和页脚背景与左边框之间的间隙:
Chrome / Mac 90%缩放/ 1181px视口页眉和页脚背景重叠右边框:
非设计影响修复是使用伪元素中的定位创建边框:
.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;
}
}
Codepen:https://codepen.io/danbrady/pen/QQYyzM(在IE11,Chrome(Mac和Win7),Firefox和Safari中测试过)。
虽然这是更多的代码,并且无可否认,它有点古怪,但它并没有改变原始的设计意图。此外,您可以考虑将其抽象为mixin或单独的实用程序类。
(P.S.从你的blog post来到这里。你激励我不要潜伏(至少在今天)。:^)
我知道这可能会发生:“你强迫Chrome做子像素演算,这通常会有奇怪的行为。”来自类似但略有不同的问题:Borders disappear in Chrome when I zoom in
经过多次试验,错误和研究后,我的修复是将1px边距(或缓冲区,如果你愿意)添加到具有背景颜色的子元素。这是一个轻微的权衡,因为边界和背景之间存在1px的差距,但这是一个我很满意的权衡。
Codepen的修复:https://codepen.io/richfinelli/pen/PQxbed?editors=1100
.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;
margin: 1px; //added this
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%);
margin: 1px; //and added this
}
1px边距或缓冲区足够我相信不会强制浏览器执行“subpixel calculus”,因此在浏览器缩小时不会删除某些边上的边框。