我有这个密码
<div class="main__projects projects js-projects">
<div class="projects__files">
<div class="projects__filesItem">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Calico_tabby_cat_-_Savannah.jpg/1200px-Calico_tabby_cat_-_Savannah.jpg" alt="cat">
</div>
</div>
</div>关于CSS
.projects {
display: flex;
z-index: 2;
opacity: 1;
transition: transform 0.25s, margin-top 0.25s, opacity 0.25s;
}
.main__projects {
position: fixed;
bottom: 0.5208333333vw;
left: 0.5208333333vw;
right: 0.5208333333vw;
background: #fff;
border-radius: 0.5208333333vw;
box-shadow: 0.15625vw 0.2083333333vw 0.5208333333vw 0 rgba(0, 0, 0, 0.2);
height: 9.375vw;
padding: 0.9375vw 1.0416666667vw 0.9375vw 5.2083333333vw;
}
.projects__files {
display: flex;
align-items: center;
}
.projects__filesItem {
margin-right: 1.3020833333vw;
position: relative;
border: solid 1px red;
height: 100%;
cursor: pointer;
}
.projects__filesItem img {
height: 100%;
}
.projects__filesItem::after {
top: -0.1041666667vw;
bottom: -0.1041666667vw;
left: -0.1041666667vw;
right: -0.1041666667vw;
border: solid 2px #109de6;
position: absolute;
content: "";
opacity: 0;
transition: opacity 0.25s;
}在Chrome中，它看起来很棒（看红色边框），但在FF中，有些东西是错误的-红色边框有一个largedge宽度enter image description here你能知道问题在哪里吗？文件夹https://jsfiddle.net/gp4fac7h/的链接
我想这个红色边框将有这个相同的FF在Chrome中什么（img的宽度）。
1条答案
按热度按时间xmakbtuz1#
找到的解决方案
您面临的问题与box-sizing属性以及不同浏览器默认情况下如何解释它有关。默认情况下，Chrome会将边框宽度包含在元素的总宽度中，而Firefox则不会。
为了实现跨浏览器的一致行为，您可以添加box-sizing：边框框;属性添加到.projects__filesItem CSS规则中。此属性将边框宽度包括在总宽度计算中。
以下是添加了box-sizing属性的更新后的CSS代码：
通过包括 Package 盒尺寸：边框框;，边框宽度将计入总宽度计算，从而使Chrome和Firefox之间的边框大小保持一致。
下面是应用了修复的修改后的JSFiddle：JSFiddle
现在，红色边框的宽度应该与Chrome和Firefox中的图像宽度相匹配。