移动端Microsoft Edge浏览器CSS按钮对齐异常问题排查求助

仅在使用移动端Microsoft Edge浏览器时出现此问题，为这些按钮使用的CSS代码如下：

.footer-wrapper a i[class^="cfi"] {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
vertical-align: middle;
}

疑问：是否遗漏了某些CSS属性？或者有没有办法在移动端使用DevTools？电脑端切换任意用户代理测试时一切正常。

移动端Edge调试方法 #

• 开启手机端Edge的开发者选项：打开Edge设置→关于Microsoft Edge，连续点击版本号直到提示开启开发者模式
• 回到设置主界面，找到开发者选项，开启USB调试
• 用USB数据线将手机连接到电脑，完成手机端的授权操作
• 打开电脑端Edge，输入地址edge://inspect，页面会自动识别手机上运行的Edge页面，点击对应页面的「inspect」按钮，即可调出和电脑端一致的DevTools，实时调试移动端页面

CSS属性补充建议 #

移动端Edge可能存在专属的默认样式或触摸交互样式，试试给目标元素补充以下属性：

• box-sizing: border-box;：确保宽高计算包含内边距和边框，避免布局超出预期
• padding: 0; margin: 0;：清除浏览器默认的内外边距干扰
• -webkit-tap-highlight-color: transparent;：去掉点击按钮时的默认高亮背景（如果是视觉异常的原因）
• text-align: center;：确保图标在容器内水平居中，避免偏移

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