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

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

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

我也试着用%代替大众，但那没有帮助

我认为这是Webkit中的一个bug。 有什么解决办法吗

示例（在Safari/Chrome OSX中测试） 将平铺悬停在绝对定位元素旁边以查看计算错误

HTML 截图

JSFIDLE

---

Safari中的测试：

是的，我在Chrome中观察到了相同的问题，但在Firefox中没有。为什么不使用

：n子类
伪类访问所需的
li
元素？尤其是当您需要用于单击和悬停事件的元素时。查找一个工作示例
我刚刚更改了样式，效果很好：

* {
    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;
}

* {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;
    }
}

* {
    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;
}