所以我有这个 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 上!
最佳答案
您可以使用 float: left;
代替 display:inline-block;
。它适用于任何高度。
关于html - 为什么在应用小数高度时 css border-bottom 不显示在这些内联 div 中?(仅限 Chrome),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35428768/