如何防止宽度设置为auto的元素中的小数像素？

Question

我有一行内联块元素都具有自动宽度,因此它们绘制的宽度与每个元素中的变化文本内容一样宽,加上一些填充.这导致每个元素的实际宽度具有分数像素.

这样会很好,但是每个元素都包含一个图标字体,当未与像素网格对齐时,它对绘制非常敏感,如果字形的原点不是整数像素值,则它的子像素渲染看起来很难看并且模糊.

如何在防止小数像素值的同时保持这些元素的宽度动态？例如,当我希望它被舍入到61px时,其中一个元素的宽度为60.183px.Sass可以做ciel(),这将是完美的,但似乎没有办法将它应用于自动值.

或者,有没有什么办法可以确保图标字形的原点是一个完整的整数像素而不会使容器宽度变圆？

由于这些元素的使用方式,我想避免使用JS进行此操作并找到仅CSS/SASS解决方案.

Answer 1

我发现如果你使用display:inline-table; 而不是显示:inline-block; 它会强制它渲染精确的像素宽度/高度.这可能会解决您的问题,但是使用table/inline-table会使容器内的空间在某些浏览器中崩溃,因此您必须将内容包装在另一个元素中.