'bottom' 在 Edge 中不起作用

Question

我有以下 HTML:

.arrow {
  width: 50px;
  position: fixed;
}
.arrow.arrow-right {
  top: 0;
  bottom: 0;
  margin: auto;
  right: 15px;
}
.arrow.arrow-bottom {
  left: 0;
  right: 0;
  margin: auto;
  bottom: 15px;
  transform: rotate(90deg);
}

<img src="http://bestanimations.com/Signs&Shapes/Arrows/Left/left-arrow-15.gif" class="arrow arrow-bottom" />
<img src="http://bestanimations.com/Signs&Shapes/Arrows/Left/left-arrow-15.gif" class="arrow arrow-right" />

我希望第一个箭头出现在屏幕右边缘附近，第二个箭头出现在屏幕底部附近。

这正是 Chrome、Firefox 和 Opera 中发生的情况：

在 Edge 中，'bottom' 规则似乎只是..被忽略了：

为什么会这样？

Fiddle

Answer 1

只需更改为以下内容：

.arrow.arrow-bottom {
    left: 0;
    right: 0;
    margin: 0 auto; /* instead of auto */
    bottom: 15px;
    transform: rotate(90deg);
}

margin: auto 导致了这个问题。如果它解决了问题，请告诉我。

'bottom' 在 Edge 中不起作用

'bottom' doesn't work in Edge

html

css

cross-browser

microsoft-edge