Как поддерживать стили в браузерах? - PullRequest
Новая
       23

Как поддерживать стили в браузерах?

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

У меня есть ul, в Chrome он сохраняет свой размер относительно своего контейнера и масштабируется, в IE он не масштабируется, а действует как theres no css.

Вторая фотография - это то, как она выглядит на весь экран, первая фотография - то, как она выглядит после масштабирования, однако при масштабировании в IE она продолжает выглядеть как вторая фотография. Я думал, что это из-за Flexbox, но, как вы можете видеть, каждый префикс, о котором я могу подумать, был применен.

Я могу провести несколько проверок совместимости, и похоже, что проблема заключалась в использовании rem, но его изменение на% или пиксель ничего не меняет. Любой другой раздел сайтов совместим со всеми браузерами и отлично масштабируется даже на мобильных устройствах. Я не применял стиль к этому, который не используется ни в одном из других разделов, так что это буквально не имеет смысла для меня.

Любая помощь будет оценена. 

#skills {
  height: 40rem;
  padding-top: 2rem;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  color: #000;
  background-color: rgba(27, 28, 28, 0.5);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#lang {
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin-top: 3%;
}

#bar {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -ms-flex-direction: column;
  align-items: flex-start;
  -webkit-box-align: flex-start;
  -moz-box-align: flex-start;
  -ms-flex-align: flex-start;
  -webkit-align-items: flex-start;
  margin-left: 30px;
}
<div id="lang">
  <ul id="bar">
    <li class="bars"><span class="bartxt">HTML 5</span></li>
    <li class="bars"><span class="bartxt">CSS 3</span></li>
    <li class="bars"><span class="bartxt">Git</span></li>
    <li class="bars"><span class="bartxt">Responsive design</span></li>
    <li class="bars"><span class="bartxt">Unicycling</span></li>
  </ul>
</div>

Correct Incorrect

...