Firefoxの絶対的な位置とChromeとの違い

Question

最近、いくつかのコードでエラーが発生しました。基本的に、絶対位置プロパティはChromeでは正しく機能しますが、Firefoxではさまざまな結果が得られます。なぜどんなアイデア？

表現：

クローム：

のFirefox： 注：Firefoxの表現に第2の小箱が存在するが遮断されます。

コード：

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

あなたはposition:absolute;

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

を使用する場合、Firefoxが明示的な位置を必要とするので absolute要素にこのCSSを追加