CSS定位不适用于IE 11，也不适用于Firefox

Question

我面临的问题是某些元素在Firefox和IE中都没有正确定位，它在Chrome中正常运行。 这是它的样子：

正确的方法就像Chrome展示一样。

Fiddle here.

.column {
  flex-direction: column;
}

.column-item-x4 {
  width: 25%;
}

.hr-menu-item-fix {
  display: flex;
  height: 100%;
  justify-content: center;
  font-size: large;

  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

.hr-menu-item-fix:hover {
  height: 130%;
  width: 30%;

  -webkit-transition: all 200ms ease-in-out 0ms;
  -moz-transition: all 200ms ease-in-out 0ms;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out 0ms;
}

.hdr-fix {
  display: flex;
  position: fixed;
  top: 0;
  height: 50px;
  width: 70%;
  z-index: 1;
  max-width: 1000px;
  min-width: 600px;

  -webkit-transition: all 200ms ease-in 0;
  -moz-transition: all 200ms ease-in 0;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in 0;
}

.link-btn-menu-fixed {
  text-decoration: none;
}

.icon-btn-menu-fixed {
  display: none;
}

.text-btn {
  position: relative;
  top: 100%;

  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

#text-user {
  margin-left: 5%;
  margin-right: 5%;
}

<link rel="stylesheet" href="../src/font-awesome/css/font-awesome.min.css">
<div class="hdr-fix">
  <span class="column column-item-x4 hr-menu-item-fix" style="background-color: dimgray;">
              <a href="#" class="link-btn-menu-fixed" style="color: white;">
                <div class="icon-btn-menu-fixed"><i class="fa fa-user fa-4x"></i></div>
                <div class="text-btn" id="text-user"><b>Item 1</b></div>
              </a>
            </span>
  <span class="column column-item-x4 hr-menu-item-fix" style="background-color: dimgray;">
              <a href="#" class="link-btn-menu-fixed" style="color: white;">
                <div class="icon-btn-menu-fixed" id="icon-folder"><i class="fa fa-folder-open fa-4x"></i></div>
                <div class="text-btn" id="text-folder"><b>Item 2</b></div>
              </a>
            </span>
</div>

我无法弄清楚发生了什么，但我确信我误解了一些有关定位的概念。任何建议和改进都是非常受欢迎的。

感谢。

Answer 1

如果从以下位置删除以下内容：.text-btn

top:100%;

这将解决问题，但我个人不会使用位置创建这些框，使用填充创建框似乎对我来说也更可靠。 你已经使用了justify-content：center;做这些垂直中心所以真的没有理由顶部：100％;我能看到。

希望这是有道理的，希望这能解决你的问题：）