Html 为什么CSS会以不同的方式显示，即使对于完全相同的元素也是如此？

我有4个完全相同的面板。然而，在我的浏览器上，我注意到一个元素的样式实际上看起来是不同的，因为我用黄色圈了圈。红色背景漏出来了。为什么会这样

//HTML
<%= 4.times do %>
<div class="col-lg-3">
<div class="profile_card">
  <div class="card_image">
  </div>
  <div class="card_info">
  </div>
  <div class="card_username">
  </div>
</div>
</div>
<% end %>

---

给出

.card image、.card info{float:left；}

不要给

.card info

留下空白，而是使用

---

这看起来很像一个取整问题，因为你使用的是百分比。啊，我明白了——这很可能就是问题所在。顺便说一句，如果我想在.card_用户名中添加内容，我该怎么做？当前，底部红色仅显示，因为它是父.profile\u卡的剩余bg。从本质上讲，如何使其显示bg:orange？.card_用户名似乎没有宽度-这可能就是它没有显示的原因（绝对定位的元素尽可能窄，而不是尽可能宽）。如果你添加内容，它应该显示得很好。那么，在消除难看的差距的同时，保持宽度百分比的最佳方法是什么呢？为什么不将个人资料卡的背景颜色改为蓝色？这将消除差距可见性

//CSS.SCSS
.profile_card {
  background-color: red;
  position: relative;
  min-height: 200px;

  .card_image {
    position: absolute;
    width: 78%;
    left: 0;
    top: 0;
    bottom: 0;
    height: 75%;
    background-color: green;
  }

  .card_info {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 22%;
    margin-left: 78%;
    height: 75%;
    background-color: blue;
  }

  .card_username {
    position: absolute;
    bottom:0;
    height:25%;
    background-color: orange;
  }
}

*{
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box
}