我有一排内联块元素，它们都具有自动宽度，因此它们绘制的宽度与它们中每个文本内容的变化以及填充的宽度一样。这导致每个元素的实际宽度具有分数像素。
这样做很好，但是每个元素都包含一个图标字体，当不与像素网格对齐时，该字体对绘制非常敏感，如果字形的原点不是整数像素值，则其子像素渲染看起来令人讨厌和模糊。
如何在防止小数像素值的情况下使这些元素的宽度保持动态？例如，当我希望将其中一个元素四舍五入至61px时，其中一个元素的宽度为60.183px。Sass可以执行ciel（），这是完美的，但是似乎没有办法将其应用于自动值。
或者，是否有任何方法可以确保图标字形的原点是一个完整的整数像素而无需舍入容器的宽度？
由于使用了这些元素的方式，我想避免使用JS进行操作，而是找到仅CSS / SASS的解决方案。
我发现如果使用display：inline-table; 而不是显示：inline-block; 它将强制其渲染精确的像素宽度/高度。这可能会解决您的问题，但是在某些浏览器中使用table / inline-table会使容器内的空间折叠，因此您必须将内容包装在另一个元素中。