Edge浏览器Bug：列表项CSS渲染异常，疑与Materialize JS相关

嘿，你已经把问题范围缩小到hammer.min.js相关文件了，这步定位太关键了！我之前也遇到过Materialize在Edge上的类似渲染坑，给你几个实用的排查和解决方向：

一、先排查Hammer.js版本兼容性 #

Materialize对Hammer.js的版本比较敏感，旧版本的Hammer.js和Edge的DOM事件模型容易出现冲突，导致样式计算异常：

• 先确认当前项目中hammer.min.js的版本，建议替换为Materialize官方推荐的稳定版本（比如v2.0.8，这个版本对Edge的兼容性经过验证）
• 修改Grunt配置中的依赖路径，指定具体版本后重新构建项目，再测试Edge中的列表渲染效果

二、手动触发样式重绘的临时修复 #

既然在开发者工具中调整list-style或line-height能恢复样式，说明Edge没有自动触发元素的重绘。可以在Materialize初始化完成后，用脚本强制触发重绘：

// 在你的页面初始化脚本末尾添加这段代码
document.querySelectorAll('.your-list-container li').forEach(listItem => {
  // 触发重绘的经典小技巧
  listItem.style.display = 'none';
  void listItem.offsetHeight; // 强制浏览器重新计算布局
  listItem.style.display = '';
});

也可以用CSS动画的方式应急：

.your-list-container li {
  /* 用一个极短的动画触发重绘 */
  animation: forceRepaint 0.01s 1 forwards;
}
@keyframes forceRepaint {
  from { opacity: 0.99; }
  to { opacity: 1; }
}

三、检查Hammer.js触摸事件的干扰 #

Edge对触摸事件的处理逻辑和Chrome有差异，Hammer.js的触摸绑定可能阻塞了列表项的样式渲染：

• 尝试禁用Materialize中依赖Hammer.js的触摸功能（比如侧边栏的拖拽），看看是否能恢复列表样式：

$('.sidenav').sidenav({
  draggable: false // 关闭触摸拖拽功能
});

如果禁用后正常，说明是触摸事件导致的问题，可以给Edge单独做兼容：

// 检测Edge浏览器
const isEdgeBrowser = /Edg/i.test(navigator.userAgent);
if (isEdgeBrowser) {
  // 给列表项解绑Hammer事件实例
  document.querySelectorAll('.your-list-container li').forEach(item => {
    const hammerInstance = Hammer(item);
    hammerInstance.destroy();
  });
}

四、排查Grunt压缩的问题 #

有时候Grunt在压缩hammer.min.js时，可能破坏了代码的兼容性逻辑，导致在Edge中执行异常：

• 尝试在Grunt配置中临时排除hammer.min.js的压缩，或者更换压缩工具（比如从uglify换成terser），重新构建后测试效果

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