html - 为什么在应用小数高度时 css border-bottom 不显示在这些内联 div 中？(仅限 Chrome)

Question

所以我有这个 jsfiddle:

https://jsfiddle.net/ionescho/4d07k799/4/

HTML:

<div class='container'>
<div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div><div class="row"></div>
</div>

CSS:

.container{
  line-height:0;
  width:100%;
}
.row{
  height:100px;  /* <--- try putting 100.66px here or some other fractional pixel value*/
  width:100.232323px;
  display:inline-block;
  background-color:red;
  border-bottom:1px solid black;
  border-right:1px solid black;
  line-height:0;
}

如果我将 100px 的高度应用到类 .row，我可以看到边框底部。如果我将非整数值应用于高度(例如:100.66px)，它就会消失。其他时间(ex height: 100.22px)显示。

有办法解决这个问题吗？例如，如果我有一个以百分比表示的高度，它可能会解析为非整数像素高度，然后我将看不到边框底部。

更新:这只发生在 CHROME 上!

Answer 1

您可以使用 float: left; 代替 display:inline-block;。它适用于任何高度。