jQuery UI 对话框渲染问题：仅Firefox下关闭按钮蓝色轮廓延伸至页面边缘

问题表现 #

• 环境：64位 Firefox 90.0 版本 + jQuery UI 1.13.0
• 触发场景：首次打开对话框、点击对话框标题栏时，关闭按钮（x）的焦点标识蓝色矩形框会超出按钮范围，延伸至页面左侧边缘

问题根因 #

该问题为Firefox 90版本焦点轮廓渲染逻辑更新与jQuery UI默认样式的兼容性冲突：jQuery UI对话框关闭按钮默认采用text-indent: -999999px的方案隐藏按钮文字，Firefox 90+版本会将负text-indent的偏移距离计入焦点轮廓的计算范围，最终导致轮廓被拉伸到页面左侧。

修复方案 #

在全局样式中添加以下CSS代码覆盖jQuery UI默认样式即可，兼容所有浏览器，不影响原有功能：

.ui-dialog .ui-dialog-titlebar-close {
  /* 替换原有text-indent隐藏方案 */
  text-indent: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  position: relative;
}

/* 可选：调整焦点轮廓偏移，保证样式对齐 */
.ui-dialog .ui-dialog-titlebar-close:focus {
  outline-offset: 0;
}

如果是自行定制过jQuery UI主题的场景，仅需将关闭按钮原有的大负值text-indent隐藏逻辑替换为上述font-size: 0的方案即可。

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