【问题标题】：Floating elements are rendered inaccurate in Webkit browsers浮动元素在 Webkit 浏览器中呈现不准确
【发布时间】：2015-11-17 18:27:17
【问题描述】：

简介

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

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

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

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

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

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

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

【问题讨论】：

标签： css google-chrome safari webkit css-float

【解决方案1】：

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

【讨论】：

【解决方案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;
}

【讨论】：