Question

我在个人项目上本地工作，我开始注意到我的导航有时会在刷新时消失。

以下是导航消失的视频，除了在Google Chrome浏览器中执行正常刷新外，我没有做任何事情https://gfycat.com/ElegantNaiveKid

如果我再次刷新，导航将回到正常位置。

查看我的CSS并看到我的导航有position: absolute;和right: 0px;，但未设置top属性。

当我写top: 0px;时，不一致的渲染停止。

此代码集是我页面顶部的一个副本，但<head>除外：http://codepen.io/anon/pen/RNXWKr

在我的页面上，使用php进行导航：

<?php 
    $pages = [
        "work" => "Work",
        "about" => "About",
        "contact" => "Contact",
        "blog" => "Blog"
    ];
?>
<div class="navigation-container">
    <div class="navigation centered">
        <div class="signature"><a href="<?php echo $pageURL ?>"></a></div>
        <ul>
            <?php 
                foreach ($pages as $pageLink => $pageName) {
                    echo "<li><a href='$pageURL/$pageLink'>$pageName</a></li>";
                }
            ?>
        </ul>
    </div>
</div>

然后网站就像这样：<?php require_once("elements/navigation.php") ?>

所以谁知道为什么会这样？这是一个错误吗？

Answer 1

我认为由于CSS规范中与绝对定位相关的部分以及包含静态位置的块，您会看到一个工件。

如果未在CSS中为position: absolute指定偏移量，则浏览器会计算包含静态位置的块并将该定位用于偏移量。

然而，CSS规范并没有真正准确地说明如何确定包含静态位置的块，因此，不同的浏览器会以不同的方式执行它。可能是Chrome对静态位置计算有一定程度上模糊的算法，结果随刷新页面而变化。

正如您所注意到的，如果指定top偏移量，则问题就会消失，因为静态位置计算不起作用。

你没有做错任何事情，只是看到了CSS规范中有些模糊部分的影响。

参考：http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#abs-non-replaced-width

Answer 2

您不应该使用绝对定位。在您的gif中，当您检查列表项时，您可以看到它们位于顶部标题下方。或者您可以保持绝对定位并设置高z-index。您是否在其他浏览器中查看过此问题？

没有机顶属性的绝对位置会产生不一致的渲染

2 个答案: