html - “底部”在 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 中，“底部”规则似乎只是……被忽略了:

为什么会这样？

Fiddle

Answer 1

只需更改为以下内容:

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

margin: auto 导致了这个问题。请让我知道它是否解决了问题。