Safari의 인라인 블록이있는 중첩 된 DIV로 인해 parent의 형제 요소가 잘못 정렬됩니다.

Question

DIV 요소로 구성된 일련의 요소를 CSS display: inline-block을 사용하여 웹 페이지의 맨 아래에 정렬하려고합니다. 문제를 설명하는 fiddle을 첨부했습니다.

문제는이 현재 코드가 Safari (7, 8)을 제외한 모든 최신 브라우저 에서 작동한다는 것입니다. 이것이 사파리가 사용하는 WebKit의 버그인지 또는 올바른 주문을 사용하지 않음으로써 일어날 수있는 버그인지는 알 수 없습니다.

원하지 않는 동작을 유발하는 것은 중첩 된 DIV.btn-sub입니다. 그러나 해당 텍스트를 제거하는 것은 문제를 "고치는"옵션이 아닙니다.

여기 사파리에서 발생 내용은 다음과 같습니다 :

여기에 예상되는 동작은 (파이어 폭스 (34), IE 9, 10에 유사한 행동, 최신 크롬에서 찍은 스냅)입니다

도움이 필요하시면 여기에 연락주세요!

Answer 1

행/목록에서 탐색과 같은 인라인 차단 요소를 만들 때 일반적으로 목록을 사용하는 것이 가장 좋습니다.

여기서 문제는 직접 패딩으로 설정된 블록 인 것 같습니다. 친척입니다. 어느 정도 여백이나 비슷한 것으로 바꾸고 있습니다.

블록에서 전체 높이를 얻을 때까지 CSS를 벗겨 낸 다음 .btn-padding이라고하는 다른 내부 div를 추가하여 상단 패딩을 포함 할 수 있습니다.

다음은 유사합니다. 클래스의 15px` 요소 :

body, html { 
 
    height: 100%; 
 
    margin: 0; 
 
    background: green; 
 
} 
 
#wrap { 
 
    display: block; 
 
    width: 100%; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    height: 50px; 
 
    border:0; 
 
    background-color: blue; 
 
    color: #fff; 
 
} 
 

 
#btnls { 
 
    display: block; 
 
    list-style-type: none; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#btnls li { 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
    background-color: purple; 
 
    min-width: 158px; 
 
    max-width: 300px; 
 
    height: 50px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
#btnls li .btn-padding { 
 
    display: block; 
 
    padding-top: 10px; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
#btnls li .btn-padding .sub-btn { 
 
    display: block; 
 
    font-size: x-small; 
 
    margin: 0; 
 
    padding: 0 
 
}

<div id="wrap"> 
 
    <ul id="btnls"> 
 
     <li> 
 
      <div class="btn-padding">Foo 
 
       <div class="sub-btn">Bar</div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="btn-padding">Foo</div> 
 
     </li> 
 
     <li> 
 
      <div class="btn-padding">Foo</div> 
 
     </li> 
 
    </ul> 
 
</div>

내가 수행 한 테스트에서