CSS如何将百分比值整数化为整数像素 [英] CSS how to round of percent values to whole number pixel

问题描述

在CSS中，当宽度，高度，边距等使用百分比时，结果有时会返回小数像素长度，例如： 100.25px。我想知道如何将其整理为下一个整数。这似乎是一个相当普遍的问题;我已经搜索了很多，但还没有找到解决方案。

例如，在下面的代码中，Chrome会将50.6px变为50px，这不是数学标准。

  background：-webkit-gradient（线性，左上方，左下方，颜色停止（0％，＃f9e7d0），停止颜色（72％，＃f9e7d0），颜色（72％，＃207cca），色彩停止（72％，＃b08b5b），色彩停止（100％，＃b08b5b））; 
  

在JavaScript中，可以使用ceil函数实现，但是可以在纯CSS中完成吗？

解决方案

浏览器自动舍入分数像素 - 有些向上，有些向下;这是硬编码到浏览器，所以没有办法强迫它做一个或另一个与CSS。

更深入地研究不同的浏览器如何处理小数像素可以找到这里。

In CSS, when width, height, margin etc use percentages, the result will sometimes come back with a fractional pixel length, e.g. 100.25px. I want to know how to round off this to the next integer. This seems to be quite a common issue; I've searched around it a lot, but have yet to find a solution.

For example, in the code below, Chrome rounds 50.6px to 50px, which isn't the mathematical standard.

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9e7d0), color-stop(72%,#f9e7d0), color-stop(72%,#207cca), color-stop(72%,#b08b5b), color-stop(100%,#b08b5b));

In JavaScript this would be achievable using the ceil function, but can it be done in pure CSS?

解决方案

Browsers round fractional pixels automatically - some up, some down; this is hard coded into the browsers so there's no way to force it to do one or the other with CSS.

A more indepth look at how different browsers treat fractional pixels can be found here.

这篇关于CSS如何将百分比值整数化为整数像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！