접두사가 있어도 IE11에서 CSS 그리드 레이아웃이 렌더링되지 않는 이유는 무엇입니까?

접두사에도 불구하고 CSS 그리드 레이아웃이 IE11에서 렌더링되지 않음

문제 이해

CSS 그리드 레이아웃에서 사용법 -ms 접두사 수는 Microsoft Edge 및 IE11과의 호환성을 보장하기 위한 것입니다. 그러나 이것이 IE11에서 그리드를 렌더링하지 못하는 경우 근본적인 원인을 조사합니다.

IE11의 제한된 그리드 사양 구현

문제의 핵심은 IE11의 이전 버전의 그리드 사양을 준수합니다. 결과적으로 제공된 HTML 및 SCSS 코드에 사용된 여러 CSS 속성은 -ms 접두사가 있어도 IE11에서 인식되지 않습니다.

특정 과제

1. repeat(): IE11에서는 그리드 템플릿 열의 반복() 기능에 대한 지원이 부족합니다. 및 그리드 템플릿 행. 대신 명시적인 열 및 행 정의를 사용해야 합니다.
2. span: Grid-column-span 및 Grid-row-span에 대한 범위 키워드는 이전 사양에 없습니다. IE11에서는 동등한 속성인 Grid-column-span 및 Grid-row-span을 사용해야 합니다.
3. grid-gap: Grid-gap 속성과 긴 형식은 IE11에서 지원되지 않습니다. . 그리드 항목 사이의 간격에는 여백과 같은 대체 방법이 필요합니다.
4. 그리드 항목 자동 배치: IE11은 그리드 항목의 자동 배치를 지원하지 않습니다. 적절한 배치를 보장하려면 각 그리드 항목에 대해 -ms-grid-row 및 -ms-grid-column 속성을 명시적으로 정의하십시오.

IE11 호환성을 위해 수정된 코드:

제공된 코드는 IE11에서 작동하려면 다음과 같이 업데이트되어야 합니다.

    .grid {
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr 1fr;
      -ms-grid-rows: 270px 270px 270px 270px;
      grid-gap: 30px;
    }

    .grid .grid-item {
      -ms-grid-column: span 2;
      -ms-grid-row: span 2;
    }

위 내용은 접두사가 있어도 IE11에서 CSS 그리드 레이아웃이 렌더링되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!