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

Question

I have a row of inline-block elements that all have auto width, so they draw as wide as the varying text content in each of them plus a bit of padding. This results in the actual width of each element having fractional pixels.

This would be fine, but each element contains an icon font that is very sensitive to being drawn when not aligned to the pixel grid, the subpixel rendering of it just looks nasty and blurry if the glyph's origin is not at an integer pixel value.

How can I keep the width of these elements dynamic while preventing decimal pixel values? For example, one of the elements ends up with the width 60.183px when I'd like it to be rounded up to 61px. Sass can do ciel(), which would be perfect, but there is seemingly no way to apply it to auto values.

Or alternatively, is there any way I can ensure that the icon glyphs have an origin that is a full integer pixel without rounding the container widths?

Because of the way these elements are used I'd like to avoid doing this with JS and find a CSS/SASS only solution.

Answer 1

I have found that if you use display: inline-table; instead of display: inline-block; it will force it to render exact pixel widths/heights. This may fix your issue however using table/inline-table will make the space within container collapse in some browsers so you would have to wrap the contents in another element.