浮动元素在Webkit浏览器中呈现不准确

Question

简介

我使用浮动li元素创建了一个网格，主要用于设计和点击处理。

当我使用position：absolute将另一个元素放在此网格上时，我注意到浮动的li元素未正确渲染/计算错误。事实上，这些元素应该更小一些。它看起来像y轴比x轴更不准确。

我也尝试使用％代替 vw ，但这并没有帮助。

我认为这是Webkit中的一个错误。 有没有解决方法？

示例（在Safari / Chrome OSX中测试）

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

HTML

OBJ_FILES

SCSS

HERE

截图

的jsfiddle

在Safari中测试：jsfiddle

Answer 1

是的，我在Chrome中观察到同样的问题但在Firefox中没有。为什么不通过li伪类到达您想要的:nth-child(n)元素？特别是当你需要点击和悬停事件的元素时。找到一个有效的例子here

Answer 2

我刚刚更改了样式并且工作正常：

* {
    margin: 0;
    padding: 0;
    border: 0;
}
ul {
    list-style: none;
    width: 100%;
}
li {
    float: left;
    width: 10%;
    height: 10vw;
    background-color: #CCC;
}
li:hover {
    background-color: #AAA;
}
.absolute {
    position: absolute;
    top: 50vw;
    left: 50vw;
    background-color: #DDD;
}