Почему нижняя граница смещается прямо под текстом? - PullRequest
Новая
       7

Почему нижняя граница смещается прямо под текстом?

0 голосов
/ 21 июня 2019

Если вы посмотрите на следующий сайт: staging.cancerwellness.com и выделите главное меню, вы увидите, что элемент становится красным, но подчеркивание смещается вправо.

Вот код CSS: 

    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link {
     position:relative;
     text-decoration:none; 
      display:block;     
   }

   #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link:after {  
     display:block;    
     content: '';
     border-bottom: solid 1px #cf2734;
     border-bottom-width: medium;  
     transform: scaleX(0);  
     transition: transform 250ms;
     transform-origin:100% 50%  
   }

    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link:hover:after { 
     transform: scaleX(1); 
     transform-origin:   100% 50%;         
     display:block; 
    }

FWIW, я попробовал display: inline-box, но он не работал.

Что может быть причиной границыСдвиг, верно?

Спасибо, Кевин Дэвис

1 Ответ

0 голосов
/ 21 июня 2019

В Firefox при наведении курсора на каждую ссылку отображается подчеркивание. Иногда, когда веб-разработчики предпочитают использовать определенный браузер, они не ожидают, что может случиться в других. Я имел это случиться со мной с подсказками, и поведение невероятно похоже.

Вот еще один вопрос, который, как мне кажется, может помочь, но я не думаю, что это правило css, которое мешает ему.

Событие клика в Chrome против Firefox дает разные цели?

...