为什么 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 的高度应用到 class .row，我可以看到边框底部。如果我将非整数值应用于高度（例如：100.66px），它就会消失。其他时间（例如高度：100.22px）显示。

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

更新：这只发生在 CHROME!

Answer 1

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

Answer 2

浏览器无法呈现半像素，因此它正在做近似处理，而您的 div 正在相互折叠。如果出于某种原因你需要这个高度（？）你可以通过添加来补偿它：

margin-bottom: .66px;

sample

旁注 - 在 hidpi 屏幕（又名视网膜）上，你的分数示例看起来不错。这是因为 css 中的每个像素都有一个以上的像素显示 MDN devicePixelRatio

Answer 3

Abhinav 给了一个很好的 way.But 你可以通过增加 border-bottom 和尊敬的 height 来做到这一点。你可以在 JSFIDDLE

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

Why doesn't css border-bottom show in these inline divs when applying a fractional height?(Only Chrome)

html

css

google-chrome

border

overlap