Here is a jsfiddle I'd like to share with you:
https://jsfiddle.net/ionescho/4d07k799/4/
The HTML code:
<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 stylings:
.container{
line-height:0;
width:100%;
}
.row{
height:100px;
width:100.232323px;
display:inline-block;
background-color:red;
border-bottom:1px solid black;
border-right:1px solid black;
line-height:0;
}
When the height of the .row class is set to an integer value like 100px, the border-bottom is visible. However, if a non-integer value like 100.66px is used, it disappears. Sometimes with values like 100.22px, it shows again.
Is there a solution to this issue? For instance, when expressing the height in percentage and resulting in a non-integer pixel value which causes the border not to show.
UPDATE: This problem seems to be specific to the Chrome browser!