margin％在Chrome中工作但在Firefox中不起作用

Question

我正在尝试让网页在Chrome和Firefox中看起来一样，就像你想的那样。我有一个带有一组div的画廊，这些div有一个百分比底部是百分比，在Chrome中运行良好，div有这个类和样式：

.opacityLayer {
  background-color: #66B9BF;
  width: 260px;
  margin: 10px;
  height: 150px;
  box-shadow: 0px 17px 10px -10px
  rgba(0, 0, 0, 0.4);
  transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  -moz-transition: all ease-in-out 300ms;

  **margin-bottom: 3%;**

  overflow: hidden;
  z-index: 5;
  position: relative;
  opacity: 0;
}

对于Firefox，我尝试过：

@-moz-document url-prefix() {
    .opacityLayer {
        margin-bottom: 10px;
    }
}

哪个有效，但如果我尝试：

  @-moz-document url-prefix() {
        .opacityLayer {
            margin-bottom: 3%;
        }
    }

它停止工作。为什么Firefox不接受Chrome这样的百分比，只有像素？我应该补充一点，html和body都有100％的高度。