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

Absolute bottom positioning not working as expected in Edge and IE

我有一个绝对定位在 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>

我修好了!只需使用 margin-left: auto;margin-right: auto; 而不是 margin: auto;

试试这个,我把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>

我在这两个浏览器上遇到了类似的问题,绝对位置太疯狂了。在风格部分我有。

td.Cir  {width:7in; height:7in; background-image:url('clock.png'); 
  background-size: 45%; background-position: center; 
  background-repeat:no-repeat; position:relative; font-size:28pt;
  min-width:7in; max-width:7in; text-shadow: -1px 0 blue, 0 1px blue,
  1px 0 blue, 0 -1px blue;}

在 table 我有

</td></tr><tr><td class='Cir'>...</td><td>...</td></tr>

我将代码更改为

<table><tr><td class='Cir'>...</td><td>...</td></tr></table>

Edge 和 IE 现在可以正常工作了