我帮你排查出了问题根源：Firefox对border的dotted透明边框处理逻辑和其他浏览器不一致——哪怕设置了transparent，Firefox仍会残留微小的点状边框痕迹，导致六边形边角错位或显示异常，而Chrome、Edge等浏览器会完全忽略这类透明点状边框。

下面是不用重写代码的修复方案，完全基于你现有代码结构调整：

核心修复：将dotted边框替换为solid #

把所有涉及border-left/right: 52px dotted transparent的属性，全部改成solid类型，Firefox对solid透明边框的渲染和其他浏览器完全一致：

修改后的关键CSS片段 #

#hex li a b {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    border-bottom: 30px solid #a6c9e2;
    border-left: 52px solid transparent; /* 替换dotted为solid */
    border-right: 52px solid transparent; /* 替换dotted为solid */
}
#hex li a em {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    border-top: 30px solid #a6c9e2;
    border-left: 52px solid transparent; /* 替换dotted为solid */
    border-right: 52px solid transparent; /* 替换dotted为solid */
}

同时，别忘了把inner和hover状态下的对应边框属性也一起修改：

#hex li a.inner b { border-bottom-color: #477AB8; border-left:52px solid transparent; border-right:52px solid transparent; }
#hex li a.inner em { border-top-color: #477AB8; border-left:52px solid transparent; border-right:52px solid transparent; }
#hex li a:hover b { border-bottom-color: #4297d7; border-left:52px solid transparent; border-right:52px solid transparent; }
#hex li a:hover em { border-top-color: #4297d7; border-left:52px solid transparent; border-right:52px solid transparent; }
#hex li a.inner:hover b { border-bottom-color: #377D9F; border-left:52px solid transparent; border-right:52px solid transparent; }
#hex li a.inner:hover em { border-top-color: #377D9F; border-left:52px solid transparent; border-right:52px solid transparent; }

可选微调：修正盒模型错位 #

如果替换边框后仍有微小对齐问题，可以微调#hex li.p1的padding值，适配Firefox的盒模型计算：

#hex li.p1 { padding-left: 53px; } /* 从原54px调整为53px */

完整修复后的CSS代码 #

#hex { padding: 0; margin: 0 auto; list-style: none; width: 335px; } 
#hex li { display: block; float: left; width: 106px; margin-right: 4px; height: 120px; } 
#hex li.p1 { padding-left: 53px; } 
#hex li.p2 { margin-top: -26px; } 
#hex li a { text-decoration: none; color: #000; cursor: pointer; } 
#hex li a b { display: block; width: 0; height: 0; overflow: hidden; border-bottom: 30px solid #a6c9e2; border-left: 52px solid transparent; border-right: 52px solid transparent; } 
#hex li a span { display: block; width: 106px; height: 60px; line-height: 59px; text-align: center; background: #a6c9e2; font-size: 15px; font-family: arial, veradana, sans-serif; } 
#hex li a em { display: block; width: 0; height: 0; overflow: hidden; border-top: 30px solid #a6c9e2; border-left: 52px solid transparent; border-right: 52px solid transparent; } 
#hex li a.inner b { border-bottom-color: #477AB8; border-left:52px solid transparent; border-right:52px solid transparent; } 
#hex li a.inner span { background: #477AB8; } 
#hex li a.inner em { border-top-color: #477AB8; border-left:52px solid transparent; border-right:52px solid transparent; } 
#hex li a:hover { white-space: normal; color: #fff; } 
#hex li a:hover b { border-bottom-color: #4297d7; border-left:52px solid transparent; border-right:52px solid transparent; } 
#hex li a:hover span { background: #4297d7; } 
#hex li a:hover em { border-top-color: #4297d7; border-left:52px solid transparent; border-right:52px solid transparent; } 
#hex li a.inner:hover b { border-bottom-color: #377D9F; border-left:52px solid transparent; border-right:52px solid transparent; } 
#hex li a.inner:hover span { background: #377D9F; } 
#hex li a.inner:hover em { border-top-color: #377D9F; border-left:52px solid transparent; border-right:52px solid transparent; }

直接替换原CSS代码后，Firefox就能和其他浏览器一样正常渲染六边形了，完全满足你复用旧页面的需求。

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