＆＃39;底部＆＃39;在Edge中不起作用

Question

我有以下HTML：

＆＃13;

＆＃13;

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

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

我希望第一个箭头靠近屏幕右边缘，第二个箭头靠近屏幕底部。

这正是Chrome，Firefox和Opera中发生的事情：

在Edge中，似乎＆＃39;底部＆＃39;规则只是被忽略了：

为什么会这样？

Fiddle

Answer 1

只需更改为以下内容：

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

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