Firefox - 너비 : 100 %가 예상대로 작동하지 않습니다.

Question

Chrome과 Safari에서 잘 작동하지만 Firefox에서 문제가있는 사이트를 구축하고 있습니다. 이 문제의 HTML은 간단합니다. div은 div의 내부에 있습니다.

   <div class="outer"> 
        <div class="top">        
         <p>some junk here</p> 
        </div> 

        <div class="middle"> 
         <img src="<?php echo(htmlspecialchars($image_url)); ?>"/> 
        </div> 

        <div class="bottom"> 
         <p>more junk</p> 
        </div> 
       </div> 

이제, CSS는 다음과 같다 :

.outer { 
    position: relative; 
    display: inline-block; 
    text-align: center; 
    width: 600px; 
    height: 600px; 
} 

.middle { 
    background-size: 100%; 
    top: 62px; 
    bottom: 62px; 
    right: 0; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
} 

.middle img { 
    position: absolute; 
    margin: auto; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    max-width: 95%; 
    max-height: 95%; 
} 

.top, .bottom { 
    width: 100%; /* THIS IS WHAT IS NOT WORKING */ 
    height: 60px; 
    margin: 0; 
    padding: 0; 
    display: table; 
    position: absolute; 
} 

.top { 
    top: 0; 
} 

.bottom { 
    bottom: 0; 
} 

목표는 나머지 공간에 걸쳐 스트레칭 부모 div, 하단에 하나의 상단에 위치 한 div, 하나를하는 것입니다

상단과 하단의 div이 100 %까지 확장되지 않는 것이 문제입니다. 자신의 콘텐츠에 맞게 필요한만큼 공간을 차지합니다. div에 최대 너비를 설정해 보았습니다. 디스플레이 유형을 변경해 보았지만 아무 것도 작동하지 않았습니다. 가장 작은 양의 창 크기를 조정하면 키커는 상단과 하단 모두 div이 100 %로 촬영됩니다. 이상한. 나는이 책을 잃어 버렸기 때문에 어떤 도움이라도 대단히 감사한다. 감사.

Answer 1

그들은 테이블의 표시 유형으로 설정했기 때문에 상단과 하단 div의 '폭이 제대로 작동했다되지 않은 이유. 해당 행을 삭제하면 문제가 해결되었습니다.

.top, .bottom { 
    width: 100%; 
    height: 60px; 
    margin: 0; 
    padding: 0; 
    /* REMOVE: display: table; */ 
    position: absolute; 
} 

Answer 2

.outer DIV는이 시나리오에서는 display: inline-block 일 수 없습니다. inline-block은 하위 폭에 적응하는 것을 의미합니다. 정확히 width 크기를 지정하거나 block 표시 속성을 사용해야합니다.

.outer { 
    position: relative; 
    display: block; /* use BLOCK here instead of inline-block; */ 
    text-align: center; 
}