Отображение: блокировка ссылки занимает больше ширины в браузере firefox против Google chrome - PullRequest
Новая
       15

Отображение: блокировка ссылки занимает больше ширины в браузере firefox против Google chrome

1 голос
/ 29 января 2020

Дисплей: блок занимает большую ширину в firefox, пожалуйста, найдите код ниже 

<ul class="mn_mainNav">
<li><a href="#">All Offers</a></li>
<li><a href="#">All Offers</a></li>
<li><a href="#">All Offers</a></li>
</ul>


.mn_mainNav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;

    & > li {
      & > a {
        display: block;
   text-transform: lowercase;

        &:first-letter {
          text-transform: uppercase;
        }
      }

    }
  }

JSFIDDLE LINK

Chrome: enter image description here

против firefox:

enter image description here

Любой указатель будет оценен

Примечание: мне нужна первая буква для ссылки li в верхнем регистре

Ответы [ 2 ]

0 голосов
/ 30 января 2020

Я нашел решение: https://jsfiddle.net/snehav27/0w5Lfz1n/5/

<ul class="mn_mainNav">
<li><a class="mn_repaintHack" href="#">All Offers</a></li>
<li><a class="mn_repaintHack" href="#">All Offers</a></li>
<li><a class="mn_repaintHack" href="#">All Offers</a></li>
</ul>


@-moz-keyframes repaintHack {
  from { padding-right: 1px; }
  to { padding-right: 0; }
}

.mn_mainNav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;

    & > li {
      & > a {
        display: block;
        text-transform: lowercase;

        &:first-letter {
          text-transform: uppercase;
        }

         &.mn_repaintHack {
          animation: repaintHack 0.00000001s;
        }
      }

    }
  }

Я только что попытался перекрасить экран после загрузки, чтобы он попытался правильно загрузить пользовательский интерфейс. Хорошо работает в firefox сейчас.

Примечание. Это решение было найдено путем чтения других сообщений в stackoverflow.

0 голосов
/ 29 января 2020

Выглядит как ошибка в firefox при использовании ::first-letter, поэтому я бы просто попытался использовать text-transform: capitalize для тега a. Это, конечно, заглавное слово каждое слово не только первое, но если вы не возражаете против этого, то это будет работать для вас. 

.mn_mainNav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.mn_mainNav>li>a {
  text-transform: capitalize;
}
<ul class="mn_mainNav">
  <li><a href="#">All Offers</a></li>
  <li><a href="#">All Offers</a></li>
  <li><a href="#">all offers</a></li>
</ul>
...