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

Question

So I have this 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;
}

IF I apply a height of 100px to the class .row, I can see the border-bottom. If I apply a non-integer value to height( ex: 100.66px ), it disappears. Other times ( ex height: 100.22px ) it shows.

Is there a way to fix this? If for example I have a height expressed in percentage, it may resolve to a non-integer pixel height and then I will not see the border-bottom.

UPDATE: this happens only on CHROME!

Sorry I forgot to mention it only happens on Chrome. Try putting 100.66px at .row height — ionescho, Feb 16 '16 at 09:44
Also working on chrome. Which version you are using? And don't use value in decimal .https://www.w3.org/TR/CSS2/syndata.html#length-units — ketan, Feb 16 '16 at 09:48
Check how decimal px working. http://www.paulund.co.uk/decimal-places-in-width-using-pixels — ketan, Feb 16 '16 at 09:48
I am checking in latest 50.0.2645.4(64-bit) and it's working. — ketan, Feb 16 '16 at 09:51
I know it's present in the DOM but the issue is that it is not visible. — ionescho, Feb 16 '16 at 10:01

score 4 · Accepted Answer · edited Feb 16 '16 at 10:13

4

You can use float: left; in place of display:inline-block;. It will work for any height.

edited Feb 16 '16 at 10:13

vard

4,057
2
26
46

answered Feb 16 '16 at 10:00

Abhinav

156
2

score 1 · Answer 2 · answered Feb 16 '16 at 10:03

Browser can't render half pixel so it is doing approximation and your divs are collapsing eachother. If for some reason you need this height (?) you can compensate it by adding:

margin-bottom: .66px;

sample

side note - on hidpi screens (aka retina) your example with fractions is looking good. This is because each pixel in css has more than one pixel on display MDN devicePixelRatio

score 0 · Answer 3 · answered Feb 16 '16 at 10:09

0

Abhinav give a good way.But you can do it by increasing border-bottom with respected height.You can check this in JSFIDDLE

answered Feb 16 '16 at 10:09

Chonchol Mahmud

2,717
7
39
72

1

Yeah.. but this has a nasty side-effect of doubling the visible bottom-border of the lowest elements. – ionescho Feb 16 '16 at 10:14
to avoid this you can use `margin-bottom` .I appreciate abhinav answer.My answer is optional way.Thanks :) – Chonchol Mahmud Feb 16 '16 at 10:22

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

3 Answers3