Как заставить CSS работать на Edge / IE так же, как на Chrome / Firefox / Opera / Safari - PullRequest
Новая
       99

Как заставить CSS работать на Edge / IE так же, как на Chrome / Firefox / Opera / Safari

0 голосов
/ 01 февраля 2019

Я использую Bootstrap 3 Datepicker v4 во встроенной функции, чтобы показать календарь на месяц.Работая над кастомным CSS, я отредактировал его внешний вид и работает как положено в Chrome / Firefox / Opera / Safari), но в Edge его поведение странное.

Вот как это работает в Chrome / Firefox / Opera / Safari: enter image description here

Вот как это работает в Edge: enter image description here

Как вы видите, позиция точек начинается с неправильной позиции, только когда я наведу на нее курсор мыши, позиция точек идет туда, где она должна быть.

Это часть .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 не работает как другие браузеры?

Что я могу сделать, чтобы решить эту проблему?

...