强制CSS在Edge / IE上的工作方式与在Chrome / Firefox / Opera / Safari上的工作方式相同

Question

我在嵌入式功能中使用Bootstrap 3 Datepicker v4来显示每月日历。在自定义css上工作时，我编辑了它的外观，并在Chrome / Firefox / Opera / Safari上按预期工作了），但是在Edge上，它的行为很奇怪。

这是它在Chrome / Firefox / Opera / Safari上的工作方式：

这是它在Edge上的工作方式：

如您所见，点的位置从错误的位置开始，只有当我将鼠标移到其上时，点的位置才会到达假定的位置。

这是.css的一部分：

#calendarMonth .day::before{
    content: "";
    position: absolute;
    z-index: 1;
    width: 35px;
    background-color: rgba(238,238,238, 0.5);
    height: 35px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* android, safari, chrome */
    -moz-transform: translate(-50%, -50%); /* old firefox */
    -o-transform: translate(-50%, -50%); /* old opera */
    -ms-transform: translate(-50%, -50%); /* old IE */
    transform: translate(-50%, -50%); /*standard */
}
#calendarMonth .day:hover::before{
    -webkit-transition: 0.8s ease;
    -moz-transition: 0.8s ease;
    -o-transition: 0.8s ease;
    transition: 0.8s ease;
    width: 40px;
    height: 40px;
}

我正在使用top，left和transform: translate()设置正确的位置。为什么Edge无法像其他浏览器一样工作？

我该怎么做才能解决此问题？