내 CSS 그리드 레이아웃이 IE11에서 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

CSS 그리드 레이아웃이 접두사에도 불구하고 IE11에서 작동하지 않는 이유

CSS 그리드 레이아웃은 웹 디자인에 혁명을 일으켰으며 유연하고 강력한 도구를 제공합니다. 복잡한 레이아웃 만들기. 그러나 IE11은 이전 버전의 그리드 사양을 지원하므로 호환성 문제가 있다는 점에 유의해야 합니다.

문제: 오래된 그리드 사양

IE11은 많은 최신 기능보다 앞서는 2011년 CSS 그리드 사양 버전입니다. 여기에는 다음 속성이 포함됩니다.

• repeat() 함수
• span 키워드
• grid-gap 속성

솔루션 : 레거시 구문 구현

호환성을 보장하려면 IE11에서는 오래된 Grid 사양에서 지원하는 구문을 사용해야 합니다. 필요한 변경 사항은 다음과 같습니다.

1. peat()를 명시적 그리드 템플릿으로 교체

repeat() 함수를 사용하는 대신 그리드 템플릿 열과 행을 명시적으로 정의합니다.

.grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

2. 범위를 Grid-column-span 및 Grid-row-span으로 대체

다음 속성을 사용하여 여러 열이나 행에 걸쳐 항목을 확장합니다.

.grid-item.height-2x {
  grid-row-span: 2;
}
.grid-item.width-2x {
  grid-column-span: 2;
}

3. 그리드 항목 자동 배치 처리

IE11은 그리드 항목 자동 배치를 지원하지 않습니다. 그리드 행 및 그리드 열 속성을 사용하여 각 항목의 위치를 ​​명시적으로 정의합니다.

.grid-item {
  grid-row: 1;
  grid-column: 1;
}

4. 그리드 갭 제거

그리드 갭 속성은 IE11에서 지원되지 않습니다. 여백이나 패딩을 사용하여 그리드 항목을 구분합니다.

결론

이러한 레거시 구문 변경 사항을 구현하면 CSS 그리드 레이아웃이 IE11에서 올바르게 작동하는지 확인할 수 있습니다. 이러한 오래된 속성에 대한 지원은 제한적이므로 가능하면 최신 그리드 사양을 사용하는 것이 좋습니다.

위 내용은 내 CSS 그리드 레이아웃이 IE11에서 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!