Autoprefixer를 사용해도 CSS 그리드 레이아웃이 IE11에서 작동하지 않는 이유는 무엇입니까?

접두사가 있어도 IE11에서 CSS 그리드 레이아웃이 작동하지 않음

자동 접두사를 사용하여 관련 CSS 속성에 접두사를 추가했음에도 불구하고 CSS 그리드 레이아웃 IE11에서는 오작동하는 것으로 보입니다. 이 문제는 브라우저의 오래된 그리드 사양으로 인해 발생합니다.

오래된 그리드 사양

IE11은 이전 버전의 그리드 사양을 구현하며, 이후에 소개되는 일부 주요 속성이 부족합니다. 버전. 특히 다음 속성은 IE11에서 지원되지 않습니다.

• 그리드 트랙 정의를 위한repeat() 함수
• 항목 확장을 위한 범위 키워드
• 그리드-갭 속성 간격

해결책

이 문제를 해결하려면 이전 그리드 사양에 대한 올바른 구문과 속성을 사용하도록 코드를 업데이트해야 합니다. 다음과 같은 변경이 필요합니다:

1. peat()를 명시적 트랙 선언으로 교체

repeat() 함수를 사용하는 대신 쉼표로 구분된 값을 사용하여 행 및 열 트랙을 명시적으로 선언합니다.

.grid {
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 270px 270px 270px 270px;
  grid-template-rows: repeat(4, 270px);
}

2. 스패닝 속성 사용

span을 긴 형태의 Grid-row-span 및 Grid-column-span으로 교체:

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

3. IE11에서 Grid-Gap 제거

IE11은 Grid-Gap 속성을 지원하지 않습니다. 대신 여백이나 패딩을 사용하여 간격을 두는 것이 좋습니다.

.grid .grid-item {
  margin: 30px;
}

추가 참고

IE11에는 그리드 항목 자동 배치에 대한 지원도 부족합니다. 적절한 배치를 보장하려면 -ms-grid-row 및 -ms-grid-column 속성을 사용하여 각 항목의 그리드 행과 열 위치를 명시적으로 지정하세요.

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