How to prevent fractional pixels in an element with a width set to auto?

Question

I have a line of inline block elements, each of which has an automatic width, so they draw as wide as the different text content in each of them plus a few indentation. This results in the actual width of each element having fractional pixels.

That would be nice, but each element contains an icon font that is very sensitive to drawing when it is not aligned with the pixel grid, its sub-pixel rendering just looks nasty and blurry if the start of the glyph is not in the integer pixel value.

How can I keep the width of these elements dynamic while preserving decimal pixel values? For example, one of the elements ends in a width of 60.183px when I need to round to 61px. Sass can do ciel (), which would be ideal, but there seems to be no way to apply it to auto values.

Or, conversely, is there any way to guarantee that icon glyphs have a coordinate origin that is a full integer pixel without rounding the width of the container?

Due to the use of these elements, I would like to avoid this with JS and only find a CSS / SASS solution.

Answer 1

I found that if you use display: inline-table; instead of displaying: inline-block; this will make it display the exact width / height of the pixel. This may fix your problem, however using an inline table / row will make the space inside the container crash in some browsers, so you have to wrap the contents in another element.