이전 브라우저에서 테이블을 표시하기위한 flexbox 폴백

긴 대답은 복잡합니다. 좋은 점은 현재 사용중인 IE10 및 대부분의 구형 브라우저가 flexbox를 지원한다는 것입니다. 그러나 사양과 동작이 완전히 다른 오래된 구문입니다. flexbox 지원 표를 참조하십시오 . 또한 레거시 flexbox 스타일 생성 확인란이 활성화 된 상태 에서이 도구 를 살펴 보거나 사용하여 관련 내용을 파악하는 것이 좋습니다. 사용하기에 상당히 교차 호환 가능한 CSS 구문을 제공합니다.

이전 브라우저와의 상호 호환성에 관심이있는 경우 * display:flex;단독으로 권장하지 않습니다. 이러한 이전 flexbox 접두사를 추가해야합니다. IE8 및 9의 경우 필요한 경우 실제로 IE8 데스크톱 브라우저를 대상으로하는 테이블 폴백을 사용할 수 있습니다. 다음 규칙 세트에 해당됩니다.

.flex-container {
  display: table;        /* IE < 10, Opera *Presto* Desktop (Now dead) */
  display: -webkit-box;  /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
  display: -moz-box;     /* Firefox 2 - 27 (2009 Spec), UCMini Android */
  display: -ms-flexbox;  /* IE10 (2012 Syntax) */
  display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
  display: flex;         /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
}

신규 및 기존 flexbox 사양 및 지원 의 주요 기능 차이점 은 flex-wrap. 따라서 많은 [ "flexbugs"] ( https://github.com/philipwalton/flexbugs ) 와주의해야 할 차이점 외에도 . 당신이 있다는 사실을 숙지 할 수 사용 flex-wrap하면 2,012 브라우저 또는 IE9을 넘어 광범위한 이전 버전과의 호환성을 원하는 경우.

* 대상 사용자가 아시아 또는 아프리카 -webkit-box에있는 경우 현재 새 구문을 지원하지 않는 Android 용 UCBrowser 모델 이 반드시 필요 합니다. (2016 년 현재, UCBrowser는 전 세계 모바일 브라우저 사용량의 10 % 이상, 아시아에서 25 % 이상을 차지합니다.) -moz-box이전 Firefox를 기반으로하는 UCMini에도 필요합니다 (사용 데이터 및 소재는 공개적으로 알려지지 않음).

플렉스 아이템 table-cell또는 table-row폴백을 위해. 특히 flexbox 중첩에서는 까다로워집니다.

그러나 다음과 같은 세 가지 옵션을 사용할 수 있습니다.

1) Modernizr 와 같은 스크립트로 기능 감지를 사용하십시오 . 그리고 Modernizr CSS 문서 스타일을 사용하여 JS 기능 감지를 통해 IE8-9 대체 규칙을 선언하십시오. 이렇게 :

html.no-flexbox .flex-item {
  display: table-cell;
}

2) IE CSS 조건부 스타일 사용 :

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie-8-9-fallbacks.css" />
<![endif]-->

또는

3) JS가 아닌 다른 방법은 CSS 해킹을 사용하는 것입니다 . 다른 브라우저에서는 무시되고 IE8-9에서만 구문 분석되고 적용되는 표시 값을 사용합니다.

함께 : a)

.flex-item {
  display: block;
  display: table-cell\0/; /*IE8-10 */
}

및 / 또는 : b)

@media \0screen\,screen\9 { /* IE6-10 and exclude FF2 */
  .flex-item { display: table-cell; }
}