网站异常显示Bootstrap屏幕阅读器信息问题排查求助

咱们一步步拆解问题，你提到新旧站点HTML源码一致但表现不同，那大概率是逻辑错误或环境兼容性问题，先看最可能的几个点：

1. 先改PHP判断里的低级错误！ #

这绝对是最可能的根源！看你布局代码里的判断条件：

if($currentpage=="/index.php") { ... }

这里用的是赋值运算符=，不是比较运算符==/===！

每次执行这个if，都会把$currentpage硬改成"/index.php"，然后因为非空字符串在PHP里算true，所以这个条件永远成立。后面的每个独立if又会重复这个操作，把$currentpage挨个改成每个页面的路径，最后导致导航项的active状态完全混乱。

旧站点正常，十有八九是旧代码里用的是==做比较，新站点迁移时手滑写成了=。

修复方法：把所有判断里的=换成===（严格比较，推荐）：

if($currentpage === "/index.php") {
    // 输出active导航项
} else {
    // 输出普通导航项
}

这样才会真正去对比当前页面的URI和目标路径是否一致。

2. Bootstrap 5的sr-only类已经废弃了！ #

你新站点用的是Bootstrap 5.0.1，但sr-only这个类在Bootstrap 5里被淘汰了，换成了visually-hidden（如果需要支持键盘聚焦的话用visually-hidden-focusable）。

旧站点如果用的是Bootstrap 4，sr-only是有效的，所以(current)会被隐藏；但新站点用Bootstrap 5，sr-only没有对应的CSS规则，这段文本就直接显示出来了。

修复方法：把所有<span class="sr-only">(current)</span>替换成：

<span class="visually-hidden">(current)</span>

这样在Bootstrap 5里就能正确隐藏这段仅给屏幕阅读器看的文本了。

3. 确认$_SERVER['REQUEST_URI']的真实值 #

不同部署环境下，$_SERVER['REQUEST_URI']的返回值可能不一样：

• 新站点可能部署在子目录里，比如URI是/subdir/rehearsal.php，不是根目录的/rehearsal.php
• 可能开了URL重写（比如隐藏.php后缀），导致URI是/rehearsal而不是/rehearsal.php

你可以在布局文件里临时加一行代码，看看实际的URI是什么：

<?php echo "当前URI：" . $currentpage; ?>

访问页面后看输出，再调整判断条件里的路径，确保和实际URI匹配。比如子目录的话，条件要改成$currentpage === "/subdir/rehearsal.php"。

4. 检查自定义CSS的影响 #

你引入了room4.css，要确认：

• 这个文件在新站点是否正确加载（用浏览器开发者工具的Network标签看有没有404）
• 里面有没有覆盖Bootstrap的样式，比如不小心把.visually-hidden的display: none给改了，或者修改了.nav-link.active的颜色，导致高亮不显示黑色。

5. 顺便修复Bootstrap 5的JS属性兼容 #

你的导航折叠按钮用了data-toggle="collapse"，但Bootstrap 5里已经把这个属性改成data-bs-toggle，data-target改成data-bs-target。虽然这不会直接影响高亮，但可能导致导航折叠失效，顺便改了：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

按这几个步骤排查，应该能解决你的问题！

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