html - Firefox 绝对位置不同于 Chrome

Question

我最近遇到一些代码错误。基本上，绝对位置属性在 Chrome 上可以正常工作，但在 Firefox 上会产生不同的结果。任何想法为什么？

表示:

Chrome :

火狐: 注意:在 firefox 表示中，第二个小框存在但被切断了。

代码:

HTML:

<div id="card-info">
        </div>
        <div class="arrow-wrapper">
            <i class=" visible-lg arrow-left pull-left fa fa-arrow-circle-o-left fa-4x" aria-hidden="true"></i>
            <i class="visible-lg arrow-right pull-right fa fa-arrow-circle-o-right fa-4x" aria-hidden="true"></i>
        </div>

SCSS:

.left-arrow {
    right: 90%;
    left: 10%;
}
.right-arrow {
    left: 90%;
    right: 10%;
}
.arrow-wrapper {
    position: absolute;
    padding-left: 100px;
    padding-right: 100px;
    width: 100%;

}

Answer 1

将此 CSS 添加到 absolute 元素，因为当您使用 position:absolute;

时，firefox 需要一个明确的位置

left: 0;
right: 0;
top: 50%;