2017-10-12 34 views
1

크롬의 CSS 그리드 시스템을 사용하여 this site을 방금 만들었습니다. 모든 것이 완벽하게 보였습니다. 어떻게하면 온라인 도구/생성기가 붙은 접두사를 추가했는지 알 수있었습니다.CSS 그리드는 모질라와 IE에서 작동하지 않습니다. (접두어 포함)

https://autoprefixer.github.io/http://pleeease.io/play/

내가 CSS Grids on 'CanIuse를 보면 '그것이 모든 브라우저에서 작동해야한다고 표시됩니다.

지금까지 Safari, Chrome, Android Chrome 및 Opera에서 작동합니다.

내 그리드 시스템이 Mozilla 및 IE에서 올바르게 표시되지 않는이 문제의 원인은 무엇입니까?

 

은 예를 들어 코드는 모두 -ms 접두사 다음과 같다.

display: -ms-grid; //IE and Mozilla prefixes.. 
display: grid; //Chrome 

-ms-grid-columns: (1fr)[6]; 
grid-template-columns: repeat(6, 1fr); 
+1

그래서 우리는 문제를 재현 할 수있는 최소한의 예를 추가 해보세요. 그렇지 않으면 주제 외 질문으로 표시 될 수 있습니다. – bhansa

+0

좋아요, 일부 코드를 추가하겠습니다 – Panic

+1

모질라 브라우저가 없으므로 Firefox를 의미합니다. FF가 최신인지 확인하십시오. – cloned

답변

0

Autoprefixer 기본적으로 CSS 그리드를 지원하지 않습니다. 깃발 : grid: true으로 활성화 할 수 있습니다. 그래도 이름이 grid-template-areas 인 것은 지원하지 않습니다. 에 관계없이

은 당신의 코드 업데이트를 귀하의 IE 그리드 열 선언을 수정합니다 :

-ms-grid-columns: 1fr, 1fr, 1fr, 1fr, 1fr, 1fr;