具有绝对定位子元素的分数高度元素答案

【问题标题】：Fractioned height elements with absolutely positioned children具有绝对定位子元素的分数高度元素
【发布时间】：2014-03-17 02:28:45
【问题描述】：

我正在尝试使用绝对定位的:before 伪元素来设置我的一些元素的样式。以下是我目前的实现方式：

.element:before {    
    content: "";
    display: block;
    height: 0;
    width: 0;
    border: 10px solid #ad0c38;
    border-right-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    bottom: 0px;
    right: -20px;
}

问题是，当我有一个包含多个类似样式的元素的列表，并且元素具有分数高度时（例如height:10.3px，请记住在使用百分比时您也可以得到分数），有时效果会被替换向上或向下一个像素。您可以在下面的 Fiddle 中看到这一点：

JS Fiddle with current Behaviour

是否可以强制元素始终向上（或向下）四舍五入，以便我的元素在浏览器四舍五入后始终具有相同的像素高度？

【问题讨论】：

你需要有分段高度吗？删除它会删除位移jsfiddle.net/dAbNs/1。只是为了让您知道，在 Chrome 中，这些值被截断 - stackoverflow.com/questions/4308989/…
我确实需要，因为我无法控制元素是否具有分段高度。这个jsfiddle.net/dAbNs 说明了我稍微好一点的情况。请注意我没有设置要分割的高度，但是百分比生成了它。

标签： html css absolute pixel-perfect

【解决方案1】：

在您的 CSS 中，使用 top: 0; 而不是 bottom: 0;

这里是example

【讨论】：

此解决方案可以修复此示例，但我当前的情况比这要复杂一些。我编辑了我的问题以反映我实际需要的内容，如果可以强制元素始终向上（或向下）四舍五入，那么我的元素在浏览器四舍五入后将始终具有相同的像素高度。