2016-10-29 11 views
-2

최근에 일부 코드에서 오류가 발생했습니다. 기본적으로 절대 위치 속성은 Chrome에서 올바르게 작동하지만 Firefox에서는 다른 결과를 제공합니다. 어떤 아이디어?Firefox 절대 위치가 다른 경우 Chrome

표현 :

크롬 : Correct

파이어 폭스 : Incorrect 참고 : 두 번째 작은 상자가 존재하지만 차단 파이어 폭스 표현에.

코드 :

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%; 

} 
+0

jsfiddle 또는 stacksnippet을 빌드 할 수 있습니까? – paolobasso

+0

@ paolo.basso99 문제 없습니다. 몇 분만 줘. – Njinx

+0

@ paolo.basso99 웹 사이트 (http://thebenallen.net)에 가보시겠습니까 – Njinx

답변

1

당신이 position:absolute;

left: 0; 
right: 0; 
top: 50%; 
를 사용하면 파이어 폭스가 명시 적으로 위치를 필요로하기 때문에 absolute 요소에이 CSS를 추가
관련 문제