Internet Explorer 10은 인라인 요소에 FlexBox를 적용하지 않습니다.

Question

Flexbox 사양 스팬 플렉스 아이템 (의 어린이플렉스 컨테이너)는 display:block로 변환되어야합니다. Internet Explorer 10이 변환을 적용하지 않으므로 FlexBox가 SPAN (인라인) 요소에서 작동하지 않습니다.

여기에 Codepen

나는 단지 div를 사용할 수 있지만, 이것이 탐색기 버그이고 HTML 코드를 변경하는 것보다 더 나은 수정이 있는지 알고 싶습니다.

Answer 1

IE10이 출시 된 후 (작업 초안) FlexBox Spec이 변경 되었기 때문입니다.

IE10이 2012 년 말에 해제 될 때 IE10이 출시 될 때 CSS FlexBox 작업 초안의 관련 덩어리가 있습니다.

Flex 레이아웃 알고리즘은 Flex 항목에 의해 생성 된 상자에서 작동합니다. 다음 각각은 플렉스 항목이됩니다.

[...]

.

4. 대체되지 않은 인라인 자식 요소의 인접한 실행을 주위에 감싼 익명 블록.

소스 : http : //www.w3 .org / TR / 2012 / WD-CSS3-FlexBox-20120612 / # 플렉스 - 항목

A span는 "비 교체 된 인라인 자식 요소"입니다. 따라서 IE10은 을 새 사양에 따라 블록 (새 사양 당)을 변환하는 대신 익명 블록 (및 인접한 인라인 컨텐츠)을 랩핑합니다.

Microsoft는 IE10의 특정 동작을 기대하도록 이미 코딩 된 콘텐츠를 방출하지 않도록 릴리스 후이 기능을 변경하고 싶지 않은 의심합니다.

IE10 및 에서 모두 최신 브라우저 버전에서 모두 모두 작동하는 FlexBox 콘텐츠를 작성하려면이 특정 동작에 의존하지 않는 것이 가장 좋습니다. (명시 적이어야합니다.이 스팬을 DIVS로 변경하거나 span로 변경하십시오.)

Answer 2

이 속성을 시도 했습니까?

display:-ms-inline-flexbox; (인라인 FlexBox 용기 용).