liebewinter: CSS-Grid: wie mache ein datei mit Firefox Code and IE 11 Code

Beitrag lesen

Hallo , ich versuche seit einege Tage ein Datei mit den Code von Firefox und IE 11 zu bauen , aber ohne erfolgt…

Beiden Code Funzioniert wenn getrent sind , aber wenn beiden Code zusammen in einem Datei legen , der Firefox Browser verendert alles von der Website...

Der Grid Code für Firefox, Opera, and Chromium;

body {
    
display: grid;    
background-color: #ebf5d7;
grid-gap: 5px;
grid-template-columns: 10% 72% 17%;
grid-template-areas:


"header   header   header"
"nav      nav      nav"
"linkBox  linkBox  linkBox"
"main     main     main"
"infoBox  infoBox  infoBox"
"footer   footer   footer" ;
}

<?php 


include 'CSS/tablet.css';

?>


body > header {
	grid-area: header;
	background-image: url("/Bilder/view.png");
    padding: 60px;
    
}

body > nav {
	grid-area: nav;
	background-color: #d2f5c4;

}

body > #externalLinks {
	grid-area: linkBox;
	background-color:  #d2f3c6;
	;
}
body > main {
	grid-area: main;
	background-color: #eaf6e5;
}

body > #furtherInformation {
	grid-area: infoBox;
	background-color: #d2f3c6;
}

body > footer {
	grid-area: footer;
	background-color: #99ee7a;

}

Der Code für IE 11;

body {
 
  margin: 5px;
  display: -ms-grid;
  display: grid;
  width: 100%;
  
  grid-gap: 5px;
  -ms-grid-columns: 9% 73% 17%;
      grid-columns: 9% 73% 17%;
  -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
      grid-rows:  120px 80px 103px 200px 110px 70px;
  background-color: #ebf5d7;
  
}






body > header {
    
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    
    
    background-image: url("/Bilder/f409784856.png");
    
    background-repeat: no-repeat;
    padding: 60px;
       
    
}

body > nav {
    
    margin: 5px;
    grid-rows: 80px;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
    
    background-color: #d2f5c4;

}

body > #externalLinks {
     margin: 5px;
    grid-rows: 103px;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    
    
   
    background-color:  #d2f3c6;
	
}
body > main {
   
    margin: 5px;
    display: block; 
    -ms-grid-column: 2; 
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
  
    
    background-color: #eaf6e5;
}

body > #furtherInformation {
    margin: 5px;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
    
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    
    background-color: #d2f3c6;
    
}

body > footer {
	margin: 5px;
        -ms-grid-column: 1;
	-ms-grid-column-span: 3;
        -ms-grid-row: 6;
        -ms-grid-row-span: 6;
     
    background-color: #99ee7a;

}

Kann Bitte jemand mir hilfe , danke!

akzeptierte Antworten