CSS导航在竖屏无缓存首次加载时样式异常问题咨询

• 目标效果：实现导航链接交互，点击链接时文字与背景色反色切换，当前选中页面对应的导航按钮常驻反色选中样式
• 本地打开页面样式全部正常，上传服务器部署后出现异常：
  • 首次无缓存访问页面时，导航链接间距异常变大，选中态背景色向外延伸至外边距区域
  • 普通刷新页面后样式恢复正常，Ctrl+F5清空缓存强制刷新时问题复现
  • 异常仅在竖屏（orientation:portrait）模式下出现，横屏模式无异常
• 效果对比：
  • 预期正常效果：
  • 异常问题效果：

1. 结构与样式规则不统一：选中态样式直接加在<li>元素上，普通导航项的样式加在内部的<a>标签上，两类元素默认渲染行为不一致：<a>是行内元素，<li>是flex布局下的块级子元素。无缓存加载时字体资源未完成加载，浏览器先按默认字体计算布局，字体加载完成后触发重排，两类元素的盒模型计算偏差直接导致间距异常。
2. 默认样式未清除：仅清除了<ul>的默认内边距，没有清除<li>的浏览器默认内外边距，不同渲染阶段默认样式参与计算引发布局偏移。
3. 间距控制不规范：仅靠margin控制导航项间距，没有给元素设置统一的内边距和display属性，行内元素的margin渲染在强制刷新无缓存场景下容易出现计算异常。
4. 样式放置位置错误：原有代码把<style>标签放在<body>末尾，浏览器会先渲染无样式内容，加载到样式后再重绘，提升了布局异常的概率。

核心修改逻辑：统一所有导航项的DOM结构、盒模型规则，消除不同元素的渲染差异，从根源避免字体加载阶段的布局抖动。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* 全局统一盒模型，清除浏览器默认内外边距 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            z-index: 1000;
            font-weight: bold;
            font-size: 100pt;
            line-height: 40%;
            font-family: 'Tai Heritage Pro', serif;
        }

        nav {
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            background-color: white;
            padding: 8px 0;
            z-index: 10000;
        } 
        .navlist {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            /* 用flex gap统一控制导航项间距，比margin渲染更稳定 */
            gap: 20px;
        }
        /* 统一所有导航项的基础渲染规则，不管是选中态还是普通态 */
        .navlist a {
            display: inline-block;
            font-size: 23px;
            /* 用padding控制反色背景的覆盖范围，避免背景延伸到margin区域 */
            padding: 4px 8px;
            color: black;
            text-decoration: none;
            font-weight: bold;
        }
        .navlist a:hover {
            background-color: black;
            color: white;
        }
        /* 选中态样式和hover态逻辑保持一致 */
        .navlist .selected {
            font-size: 30px;
            color: white;
            background-color: black;
        }

        @media screen and (min-width:160px) and (orientation:portrait){
            .title{
                font-size: 118px;
                margin-top: 5.45vh;
                line-height: 100%;
            }
            nav{
                padding: 20px 0;
            }
            .navlist a,
            .navlist .selected{
                font-weight: bold;
                font-size: 32px;
                padding: 6px 10px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="title">
            <span>Cristian Leciu</span>
        </div>
    </header>

    <nav>
        <ul class="navlist">
            <!-- 选中项也包裹a标签，保证所有导航项DOM结构完全一致 -->
            <li><a href="index.html" class="selected">HOME</a></li>
            <li><a href="portfolio.html">PORTOFOLIO</a></li>
            <li><a href="contact.html">CONTACT</a></li>
        </ul>
    </nav>
</body>
</html>

• 引入字体时添加font-display: swap配置，避免字体加载阶段文本不可见，进一步减少布局偏移
• 如果对加载稳定性要求高，可以给字体资源添加rel="preload"预加载提示，让浏览器优先加载字体资源，降低首次渲染和字体加载完成后的布局差

内容的提问来源于stack exchange，提问作者Cristian Leciu