css - float 元素在 Webkit 浏览器中呈现不准确

Question

介绍

我使用 float li 元素创建了一个网格，主要是出于设计和点击处理的原因。

当我使用 position:absolute 在这个网格上定位另一个元素时，我注意到 float 的 li 元素没有正确呈现/计算错误。事实上，这些元素应该更小一些。看起来 y 轴也比 x 轴不准确。

我也尝试使用 % 而不是 vw 但这没有帮助。

我认为这是 Webkit 中的错误。有什么解决方法吗？

示例(在 Safari/Chrome OSX 中测试)

将图 block 悬停在绝对定位元素旁边以查看计算错误。

HTML

<ul>
    <!-- 10 -->
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>

    <!-- Repeat a few times ... -->

    <li class="absolute"></li>
</ul>

SCSS

* {margin:0;padding:0;border:0;}

ul {
    list-style:none;
    width:100vw;

    li {
        float:left;
        width:10vw;
        height:10vw;
        background-color:#CCC;

        &:hover {
             background-color:#AAA;
        }
    }

    .absolute {
        position:absolute;
        top:50vw;
        left:50vw;
        background-color:#DDD;
    }
}

截图

JSFiddle

在 Safari 中测试:jsfiddle

Answer 1

是的，我在 Chrome 中发现了同样的问题，但在 Firefox 中却没有。为什么不使用 :nth-child(n) 伪类访问所需的 li 元素？尤其是当您需要用于点击和悬停事件的元素时。找到一个工作示例 here