Moodle 4.1移动端App测验页面sr-only类span问题解决方法

• 确认问题本质：sr-only类是专为屏幕阅读器设计的隐藏文本样式，移动端App未正确加载该类的CSS规则，导致原本应隐藏的文本直接显示。

• 方案一：补全主题移动端CSS样式

  1. 登录Moodle后台，进入站点管理 → 外观 → 主题 → 当前使用主题 → 高级设置
  2. 在「额外CSS」或「原始CSS」区域添加以下代码：

     .sr-only {
         position: absolute;
         width: 1px;
         height: 1px;
         padding: 0;
         margin: -1px;
         overflow: hidden;
         clip: rect(0, 0, 0, 0);
         white-space: nowrap;
         border: 0;
     }
     

  3. 保存设置后，前往站点管理 → 开发 → 清除缓存，再用移动端App测验页面验证效果。

• 方案二：排查第三方插件冲突

  • 暂时禁用所有测验相关的第三方插件，重新测试页面，确认是否是插件覆盖了sr-only样式导致问题。
  • 若禁用后问题解决，逐一启用插件排查出冲突插件，联系开发者更新或替换插件。

• 方案三：升级或修复核心样式

  • 尝试将Moodle 4.1升级到最新的维护版本，官方可能已修复移动端样式渲染的漏洞。
  • 若无法升级，可备份核心主题的移动端CSS文件后，手动添加上述sr-only样式规则（注意：修改核心文件需做好版本备份，避免后续升级丢失修改）。

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