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;将这些垂直居中，所以真的没有理由 top:100%;我可以看到。

希望这是有道理的，希望这能解决您的问题:)