ONLY Firefox behaves weird with inline-block element

Question

I was playing with responsive css grids recently so I tried to make one of my own for new project. I decided to keep it fairly simple so I used display:inline-block property for my cells.

This would either require margin:-0.25em "hack" or removal of spaces between inline-block elements to counter last element skipping to a new line.

I decided for removal of white space between columns. It works excellent even in IE8, but for some reason latest Firefox acts as if there's white space in between.

Only explanation I can think of right now is that Firefox re-formats HTML code before rendering it and in that process adds new line after each </div> closing tag.

Here's my JS Fiddle

Thanks in advance!

[ANSWER] I have forgot to put firefox prefix for box-sizing, and padding that served as spacing between columns made excess content because of that.

it's fixed by adding : -moz-box-sizing: border-box; to col elements.

Answer 1

Try vertical-align:top with display:inline-block

Answer 2

After fiddling around with your code, the issue is the 10px padding. If you remove that line Firefox displays identical to chrome (I didn't test in IE).

Really it's probably an oversight on firefox's part. I wouldn't worry too much about it, as your page is still readable, albeit a bit ugly.

My suggestion if you're so inclined to fix it is to pad the cells "manually" by adjusting their relative positions.

Answer 3

Any css-grid (Pure CSS for example) that uses inline-block as its display style, needs an element (usually a div) as an immediate child of your grid element on which you inject your padding. See the pseudo-code example below (note this is fictitious grid syntax):

...
<style>
    .inner-wrap {
        padding: 1em;
    }
</style>
...
<div class="grid-one-third">
    <div class="inner-wrap">
    </div>
</div>

In the above example applying padding directly to "grid-one-third" will break your layout. Applying it to "inner-wrap" though will accomplish your desired outcome, without the need for something like box-sizing: border-box, which I view it as a hack solution to the problem in this case.