如何跨浏览器维护样式？

Question

我有一个ul，在Chrome中，它保持相对于其容器的大小并缩放，在IE中，它不缩放，而是像没有CSS一样起作用。

第二张照片是全屏显示的外观，第一张照片是缩放后的外观，但是在IE中缩放时，它仍然看起来像第二张照片。 我以为这是因为Flexbox所致，但是您可以看到我想到的每个前缀都已应用。

我已经进行了许多兼容性检查，看起来问题出在使用rem，但是将其更改为％或pixel并没有改变。 网站的其他部分与所有浏览器兼容，即使在移动设备上也可以很好地扩展。 我没有对此应用任何其他部分都没有使用过的样式，因此这对我来说实际上毫无意义。

任何帮助将不胜感激。

#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>