Chrome CSS3 ошибка перехода границы внизу

Question

У меня проблема только внутри Chrome, проверил это внутри Opera, FF, Safari, и все работает нормально.

Я знаю, что в Chrome 17 была ошибка с переходами по посещаемым ссылкам, поэтому я дажеВключено, что считается исправленным

По-прежнему отсутствует анимация перехода при наведении курсора на нижнюю границу.

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

Я пытался анимировать в border-bottom от none до 1px solid # 9ecd41, но обнаружил, что во всех браузерах, кроме firefox, присутствовала причудливая неровная анимация, в которой она вроде бы отклонялась.Прикрепленный код, с которым я работаю.

Хорошо, вот мой HTML

  <nav>
    <ul class="nav">
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">MEDIA</a></li>
      <li><a href="#">BLOG</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
 </nav>

А вот мой CSS

nav {
float: right;
height: auto;
width: auto;
padding: 25px;
}

ul.nav {
width: auto;
height: auto;
overflow: visible;
}

.nav > li {
display: inline-block;
margin-right: 20px;
}

.nav > li:last-child {
margin-right: 5px;     
}



/* non-visited links: Chrome transition bug fix */
.nav > li > a:visited {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */

-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}

/* visited links: Chrome transition bug fix */
.nav > li > a {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */

-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}


.nav > li > a:hover {
border-bottom: 1px solid #9ecd41;
}

.nav > li > a:active {
    border-bottom: 1px solid #f96d10;
}

Answer 1

Просто стилизовал <li> так, как я бы применил стилизацию li с помощью widths / heights / padding / border и т. Д., А затем просто стилизовал ссылку, чтобы заполнить li, и просто стилизовал цвет ссылок и свойства шрифта.В Chrome есть небольшая ошибка на границе дна для переходов ссылок

Answer 2

У меня была эта проблема с компонентом Navbar Bootstrap 4.Мои ссылки в меню имели границы внизу, и начиная со второй, все они были невидимы при открытии меню на мобильном телефоне.Исправлено это с transform: rotate(0); на элементе с границей-дном.

Answer 3

Это должно быть легко исправить.Насколько я понимаю, ваша проблема заключается в том, куда вы помещаете переход. В chrome его нужно добавить не более чем в родительский.

Попробуйте добавить его здесь:

.nav > li {
   display: inline-block;
   margin-right: 20px;
}

Также добавьте объявление для элементов -webkit- для ex.

.nav > li {
   display: inline-block;
   margin-right: 20px;
   -webkit-transition: all .5s ease-in;
   -moz-transition: all .5s ease-in;
   -o-transition: all .5s ease-in;
   -ms-transition: all .5s ease-in;
   transition: all .2s ease-in;
   -webkit-transition-property: all;
   -webkit-transition-duration: .5s;
   -webkit-transition-timing-function: ease-in;
}

Посмотрите, работает ли это, а если нет, я постараюсь создать нечто подобное иработа над решением.