绝对底部定位在Edge和IE

Question

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

IE＆amp;边缘

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>

Answer 2

两个浏览器都有类似的问题，绝对位置太疯狂了。在样式部分，我有。

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;}

我有一张桌子

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

我将代码更改为

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

并且Edge和IE现在可以正常工作

Answer 3

我修好了！只需使用margin-left: auto;和margin-right: auto;代替margin: auto;