MacBook端Safari下Bootstrap按钮错位至屏幕最右侧如何排查解决？

• 代码里可直接定位的几个macOS Safari兼容触发点：
  • 使用已废弃的<center>标签包裹全部内容。macOS Safari对这个老标签下的flex元素布局计算逻辑与Chrome存在差异，会把溢出的弹性子元素整体推到视口右侧的溢出区间；iOS Safari的布局引擎针对移动端做了专门适配，因此不会复现该问题。
  • #List导航块的类与样式叠加冲突。元素同时绑定了Bootstrap的container、col-lg-12类，还附带了带笔误的内联样式width: 100%:（值末尾多打了冒号）。三类宽度规则互相干扰：container本身自带左右15px内边距，col-lg-12本身就是占满整行的100%栅格宽度，再叠加内联100%宽度规则，Safari会计算出超出实际视口的元素总宽度。
  • 子元素宽度撑破容器。三个按钮同时叠加了Bootstrap的col-lg-2栅格类、自定义.poly类的width:20%、margin-right:2%，再加上栅格类自带的左右15px内边距，macOS Safari的flex布局不会自动收缩子元素总宽度适配父容器，最终让按钮整体溢出到视口100%-200%的区间，触发不必要的横向滚动。
  • 冗余样式引入冲突。代码中同时加载了未压缩的bootstrap.css和压缩版的bootstrap.min.css，重复的样式声明在Safari中会出现优先级计算偏差；Chrome会自动去重同来源的重复样式规则，因此不会出现显示异常。
• 可直接落地的修复步骤：
  • 移除页面中所有<center>标签，所有居中逻辑改用CSS实现——比如通过容器margin: 0 auto、flex居中的方式布局，从根源上规避老标签的浏览器兼容问题。
  • 清理#List容器的冗余类与笔误：删除col-lg-12类，修正内联样式的笔误。container类本身已经完成响应式宽度适配，不需要额外写width:100%的规则，避免宽度规则叠加冲突。
  • 修正flex布局的宽度计算逻辑：全局添加box-sizing: border-box兜底，把.poly类的width:20%改为flex: 0 0 20%，移除原来的margin-right:2%，改用flex容器的gap属性设置按钮间的间距，彻底避免百分比宽度与外边距叠加导致的溢出。
  • 只保留一份Bootstrap样式文件（推荐保留体积更小的bootstrap.min.css），删除重复引入的bootstrap.css，减少样式冲突概率。
  • 可添加兜底规则：给body标签设置overflow-x: hidden，避免偶然出现的宽度溢出触发横向滚动。

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