html - 绝对底部定位在 Edge 和 IE 中无法正常工作

Question

我有一个绝对定位在 bottom: 50px 的图标，虽然这在每个浏览器中都可以正常工作，但 Edge 和 IE 除外。我知道 Microsoft 的浏览器存在很多问题以及它们如何以不同方式呈现。在这里，我看到浏览器将 100vh div 的中间点视为底部。我需要帮助的是在 IE 和 Edge 中以与在 Chrome、Opera 和 Firefox 中相同的方式定位图标。谢谢。

IE 和边缘

Chrome、Firefox、Opera

HTML

.content1 {
  height: 100vh;
  width: 100%;
  position: relative;
  top: 0;
  z-index: 99;
}


/* this is the icon I was talking about */

.dropdown_blue1 {
  width: 25px;
  padding: 20px;
  position: absolute;
  margin: auto;
  z-index: 99;
  left: 0;
  right: 0;
  bottom: 50px;
}

<div class="content1"><img class="dropup_blue1" src="../assets/dropup_blue.png" alt=""><img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt=""></div>

Answer 1

试试这个，我已经将 margin: auto; 更改为 margin: 0 auto;

.content1 {
      height: 100vh;
      width: 100%;
      position: relative;
      top: 0;
      z-index: 99;
}
.dropdown_blue1 {
      width: 25px;
      padding: 20px;
      position: absolute;
      margin:0 auto; /* change here */
      z-index: 99;
      left: 0;
      right: 0;
      bottom: 50px;
}

<div class="content1">
   <img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt="">
</div>