如何防止宽度设置为自动的元素中的小数像素? [英] How to prevent fractional pixels in an element with width set to auto?

问题描述

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

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.

如何在防止小数像素值的情况下使这些元素的宽度保持动态?例如，当我希望将其中一个元素四舍五入至61px时，其中一个元素的宽度为60.183px.Sass可以执行ciel()，这是完美的，但是似乎没有办法将其应用于自动值.

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?

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

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

推荐答案

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

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.

这篇关于如何防止宽度设置为自动的元素中的小数像素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！