相关疑难解决方法(0)

在做CSS设计的过程中,我一直想知道一些事情.

css宽度中的小数位是否受到尊重？或者他们四舍五入？

.percentage
{
    width: 49.5%;
}

要么

.pixel
{
    width: 122.5px;
}

CSS px可以成为一个分数吗？标准是否允许？如果是这样,主流浏览器是否支持它？

伙计们,让我们用文档来回答答案.

假设您需要向用户显示颜色列表.颜色必须显示在具有固定高度的列表中,每种颜色占据该高度的相等部分.

以下是四种颜色的样子,列表高度为90像素,边框周围有厚边框:

上面的图像在以下来源的Firefox 3.6.13中呈现:

<ul style="height: 90px; border: 5px solid black; padding: 0;">
    <li style="height: 25%; background: red;">
    <li style="height: 25%; background: blue;">
    <li style="height: 25%; background: yellow;">
    <li style="height: 25%; background: green;">
</ul>

这一切都很好.该列表确实是90像素高度 - 在边界内 - 并且每种颜色获得(看似)该空间的相等份额.现在,让我们在Safari或Chrome中呈现相同的HTML/CSS:

注意绿色行和边框之间的窄白行.对于我们在这里看到的内容,有一个非常简单的解释:0.25 × 90 = 22.5

Safari和Chrome中的WebKit并不真正喜欢非整数像素高度并且会丢弃小数.有四行高度22,我们在列表底部得到2个像素:90 - 4 × 22 = 2

在静态HTML文件的上下文中,我们可以轻松地将元素的高度分别设置为23,22,23,23像素,并且列表在任何浏览器中都会显示正常.另一方面,如果从数据库加载颜色并且计数随每个请求而变化,则需要更灵活的解决方案.

我知道如何通过onload使用Javascript 计算和设置每行的整数值高度来解决这个问题,如果没有其他任何显示,我将发布此解决方案.但是,我会更喜欢纯粹的基于CSS的解决方案.你能想到一个吗？

我记得在SO上读过，CSS中一般应避免像素分数，因为浏览器倾向于将其舍入为完整像素。

实际上，以下示例显示了0.3像素如何舍入为完整像素：

span {
  border: 0.3px solid black;
}

<span>Lorem ipsum.</span>

我很惊讶，因为我似乎找到了一个反例：

span {
  color: white;
  -webkit-text-stroke: 0.3px black;
}

<span>Lorem ipsum.</span>

与1px：

span {
  color: white;
  -webkit-text-stroke: 1px black;
}

<span>Lorem ipsum.</span>

我不是在抱怨的是它发生，相反它几乎是一个救星我，但我想知道为什么它会发生。

• 浏览器何时将像素分数四舍五入为完整像素？什么时候不呢？这里有什么规则？
• 我可以依靠浏览器不四舍五入0.3px到1px在上面的例子？这种行为在浏览器之间是否一致？还是依靠这种行为来解决麻烦？
• 这怎么发生？在笔记本电脑上，像素（像素）应该不受硬件（显示器）限制的约束吗？