绝对底部定位在 Edge 和 IE 中未按预期工作

Posted 2023-03-06

【中文标题】绝对底部定位在 Edge 和 IE 中未按预期工作

【英文标题】：Absolute bottom positioning not working as expected in Edge and IE

【发布时间】：2017-08-23 21:44:08

【问题描述】：

我有一个绝对定位在bottom: 50px 的图标，而这在每个浏览器中都可以正常工作，Edge 和 IE 是例外。我知道微软的浏览器存在很多问题，以及它们呈现方式的不同。在这里，我看到浏览器将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>

【参考方案1】：

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

【参考方案2】：

试试这个，我把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" >
</div>

【讨论】：

谢谢！更好更简单的解决方案！

我有同样的问题，这些解决方案都不起作用

@NigelFds 你能提供一个链接吗？

嗨@JishnuVS 它仍处于测试阶段，链接是内部的。但我改变了设计，所以它不需要是 position: absolute; .无论如何，谢谢。

【参考方案3】：

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

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 现在可以正常工作了