테이블 셀 부모와 절대 위치에있는 의사 요소가있는 IE 수직 센터링 버그

Question

여러 가지 제약 조건이있는 유연한 진행률 막대를 작성합니다. 그것은 그 안에 모든 항목을 포함 할 수 있어야하며,이 항목들은 모두 동일한 너비, 수직 중심, 다양한 길이의 내용 지원, IE9 이상에서 작동하며 추가 마크 업없이 아이콘이 옆에 있어야합니다. display: table-cell은 텍스트를 멋지게 수직으로 정렬 할뿐만 아니라 내부의 항목을 무제한으로 만들 수있는 가장 적합한 솔루션 인 것처럼 보였습니다. : before는 top: 50%; translateY(-50%) method과 수직으로 정렬되는 아이콘을 처리합니다.

이것은 현대적인 브라우저에서 잘 작동합니다. 특히 여기에는 특별한 것이 없습니다. 그러나 Internet Explorer의 모든 버전에서 이것은 내가 원하는대로 부드럽게 진행되지 않습니다. 항목의 높이가 가변적 인 경우 아이콘은 높이가 가장 높은 요소를 중심으로 수직으로 정렬되지 않습니다. IE9는 translateY를 지원합니다. 테이블/테이블 셀 (table/table-cell)에 어려움을 겪었으므로 IE9는 오래되었습니다. IE11조차도이 작업을 할 수 없습니다. IE11에서 그리고 실패 : 여기

I have created a reduced test case on CodePen so you can see it in action:

는 파이어 폭스에서 완벽하게 작동하는 방법의 스크린 샷이다 내가 처음에 오류가 계산되지 않는 요소의 높이 때문이라고 생각

IE에서는 올바르게 표시되지만 경계가 균일하면 이것이 사실이 아니라는 것을 나타냅니다.

목록 항목을 display: inline-block으로 설정하고 수동으로 너비를 설정하면 아이콘이 세로 방향으로 가운데에 맞춰 지지만 가능하다면 표 셀 표시의 더 유연한 동작을 유지하려고합니다.

어떤 통찰력이라도 대단히 감사하겠습니다. 미리 감사드립니다!

Answer 1

IE가 셀의 높이를 계산하는 방법과 관련된 것으로 보입니다. 그들의 높이는 내용 자체의 높이가 아닌 요소의 높이를 기준으로합니다. 고유의 높이가 일치해야 그래서 I리스트 자체의 상대적인 위치를 이동 :

이어서

.progress-bar { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    position: relative; 
    counter-reset: progressBar; 
} 

제가 사용 약간 다른 방식으로 검사를 배치하여 top 50 % 오프셋되지만 left은 "오프셋 떠나는 자동차 "와 (그들은 transform보다 이전 버전과 호환 지원이 있기 때문에) 장소로 이동하는 음의 여백을 사용하지만, 그 선택은 당신에게 달려 :

&:before { 
    content: "✓"; 
    color: green; 
    display: block; 
    position: absolute; 
    top: 50%; 
    margin-top:-.5em; 
    margin-left: -1em; 
} 

도움이 되었기를 바랍니다. 영리 fiendlishy입니다 http://codepen.io/aarongustafson/pen/PwPxEp