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

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

  1. Hallo

    Mit den Quellcodeschnipseln kann niemand etwas anfangen, wie können die Seite so ja nicht nachbauen.

    Mir fällt auf die schnelle nur auf, dass du für das CSS-grid vom IE11 hauptsächlich Präfixe verwendest. Der IE11 benötigt aber ein ganz anderes CSS. Ob sich die beiden CSS-Grid-Versionen einfach so mischen lassen wage ich deshalb zu bezweifeln.

    Siehe zum Beispiel:

    https://maurice-web.de/css-grids-raster-im-ie10-und-in-neuer-syntax-definieren/

    Nachprüfen kann ich deine Angaben nicht, da du uns entscheidenden Quelltext vorenthälst.

    Ich persönlich verwende für ein CSS-Grid-Layout als Fallback Flexbox. Dann gibt es einerseits keine CSS-Überschneidungsprobleme der unterschiedlichen grid-Versionen. Gleichzeitig werden so noch viele andere Browser unterstützt, die zwar überhaupt kein CSS-Grid kennen, aber mit Flexbox umgehen können.

    Flexbox war ja Jahre eher in der Praxis einsetzbar als CSS-Grid.

    Dabei kann und wird es wahrscheinlich zu unterschiedlichen Darstellungen kommen, das ist aber gängig und normal. Wer für alle Endgeräte die gleiche Ansicht erzeugen will hat sowieso die Entwicklung von HTML und CSS der letzten 10 Jahre verpasst. Das geht schlicht nicht.

    Gruss

    MrMurphy

    1. Erste vielen danks für deine Antwortet ! ,kannst du Bitte einiger Schritten sagen um das zu machen ?

      Nachprüfen kann ich deine Angaben nicht, da du uns entscheidenden Quelltext vorenthälst.

      body {
       
        display: grid;
        
        
        width: 100%;
        height: 250px;
        grid-gap: 5px;
        grid-template-rows:  120px 80px 103px 200px 110px 70px;
        grid-template-columns: 100px 400px 200px;
        grid-template-areas:"header   header   header"
                            "nav      nav      nav"
                            "linkBox  linkBox  linkBox"
                            "main     main     main"
                            "infoBox  infoBox  infoBox"
                            "footer   footer   footer" ;
         
        display: -ms-grid;
         -ms-grid-columns: 9% 73% 17%;
        
         -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
        
           
         background-color: #ebf5d7;
         margin: 5px;
      }
      
      
      
      
      
      
      body > header {
         
          grid-template-columns: 1/3;
          grid-template-rows: 1/3;
          -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 {
          
         
          grid-columns: 1/3;
          grid-rows: 1/3;
          -ms-grid-column: 1/3;
          -ms-grid-column-span: 3;
          -ms-grid-row: 2;
          
          background-color: #d2f5c4;
          margin: 5px;
      }
      
      body > #externalLinks {
          
          grid-columns: 1; 
          grid-rows: 103px;
          -ms-grid-column: 1;
          -ms-grid-row: 3;
          -ms-grid-row-span: 3;
          margin: 5px;
          
         
          background-color:  #d2f3c6;
      	
      }
      body > main {
          
          grid-columns: 2; 
          grid-rows: 200px;
         
          display: block; 
          -ms-grid-column: 2; 
          -ms-grid-row: 3;
          -ms-grid-row-span: 3;
          margin: 5px;
          
          background-color: #eaf6e5;
      }
      
      body > #furtherInformation {
          
          grid-columns: 3; 
          grid-rows: 110px;
          
          -ms-grid-column: 3;
          -ms-grid-column-span: 3;
          
          -ms-grid-row: 3;
          -ms-grid-row-span: 3;
          margin: 5px;
          background-color: #d2f3c6;
          
      }
      
      body > footer {
      	
              grid-columns: 1/3; 
              grid-rows: 70px;
              
              -ms-grid-column: 1;
      	-ms-grid-column-span: 3;
              -ms-grid-row: 6;
              -ms-grid-row-span: 6;
              margin: 5px;
              background-color: #99ee7a;
      
      }
      
    2. jetzt habe versuche ohne grid-template-areas die ich Fehler gemacht habe , weil grid-template-areas ist für IE , und an IE schon mit -ms-grid-column: gegeben habe ...

      body {
       
        display: -ms-grid;
        display: grid;
        grid-areas:         "header   header   header"
                            "nav      nav      nav"
                            "linkBox  linkBox  linkBox"
                            "main     main     main"
                            "infoBox  infoBox  infoBox"
                            "footer   footer   footer" ;
        
        width: 100%;
        height: 250px;
        grid-gap: 5px;
        -ms-grid-rows:  120px 80px 103px 200px 110px 70px;
        grid-rows:  120px 80px 103px 200px 110px 70px;
        -ms-grid-columns: 9% 73% 17%;
        grid-columns: 100px 400px 200px;
      
      
        
        
         
        
           
         background-color: #ebf5d7;
         margin: 5px;
      }
      
      
      
      
      
      
      body > header {
         
          -ms-grid-column: 1;
          -ms-grid-column-span: 3;
          grid-columns: 1/3;
          -ms-grid-row: 1;
          -ms-grid-row-span: 1;
          grid-rows: 1/3;
          
          
          
          
          background-image: url("/Bilder/f409784856.png");
          
          background-repeat: no-repeat;
          padding: 60px;
             
          
      }
      
      body > nav {
          
          -ms-grid-column: 1/3;
          -ms-grid-column-span: 3;
          grid-columns: 1/3;
          -ms-grid-row: 2;
          grid-rows: 1/3;
         
         
          
          background-color: #d2f5c4;
          margin: 5px;
      }
      
      body > #externalLinks {
          -ms-grid-column: 1;
          grid-columns: 1; 
          -ms-grid-row: 3;
          -ms-grid-row-span: 3;
          margin: 5px;
          grid-rows: 103px;
          
         
          
         
          background-color:  #d2f3c6;
      	
      }
      body > main {
          -ms-grid-column: 2;
          grid-columns: 2; 
          -ms-grid-row: 3;
          -ms-grid-row-span: 3;
          display: block; 
          margin: 5px;
          grid-rows: 200px;
         
          background-color: #eaf6e5;
      }
      
      body > #furtherInformation {
          
          -ms-grid-column: 3;
          -ms-grid-column-span: 3;
          grid-columns: 3; 
          -ms-grid-row: 3;
          -ms-grid-row-span: 3;
          margin: 5px;
          grid-rows: 110px;
          
          
          background-color: #d2f3c6;
          
      }
      
      body > footer {
      	-ms-grid-column: 1;
      	-ms-grid-column-span: 3;
              grid-columns: 1/3; 
              -ms-grid-row: 6;
              -ms-grid-row-span: 6;
              margin: 5px;
              grid-rows: 70px;
              
              background-color: #99ee7a;
      
      }
      
      

      wie der screenshot zeigt zeigt , ist besser geworden , aber nicht 100% ...

    3. ich habe dieser Artikel gefunde der sprecht , was du sagst…

      CSS Grid Layout with Flexbox Fallback

      ich möchte ihn lesen...

      1. @@ liebewinter

        dieser Artikel […] ich möchte ihn lesen...

        Ich nicht. Da steht ziemlich viel Unsinn drin.

        .grid-container {
          @supports (display: grid) {
            display: grid;  
            grid-column-gap: 30px;
            grid-row-gap: 30px;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
          }
        }
        

        Das ist kein gültiges CSS.

        In Sass wäre die Verschachtelung so möglich. Davon steht aber nichts da. Außerdem sollte solch ein Artikel keinen Präprozessor verwenden.

        Andersrum wäre es gültiges CSS:

        @supports (display: grid) {
          .grid-container {
            display: grid;  
            grid-column-gap: 30px;
            grid-row-gap: 30px;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
          }
        }
        

        Das ist aber immer noch unsinnig, denn das tut exakt dasselbe wie

          .grid-container {
            display: grid;  
            grid-column-gap: 30px;
            grid-row-gap: 30px;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
          }
        

        Wozu also das @supports()?

        function detectIE() {
          if(navigator.userAgent.match(/Trident.*rv:11\./)) {
            $('body').addClass('ie11');
          }
        }
        
        

        User fucking agent sniffing?? Was für ein Blödsinn!

        IE versteht kein @supports(), das stimmt. Das ist aber kein Grund für solchen Quatsch.

        Man schreibt die Regeln für den Fallback ohne .ie11 auf und überschreibt sie (falls überhaupt nötig) für moderne Browser wieder in einem @supports()-Block – dafür macht ein solcher Sinn.

        Also nicht

        .ie11 {
          li {
            min-width: 290px;
            width: calc((100% / 5) - 30px);
          }
        }
        

        (mal abgesehen davon, dass das schon wieder kein CSS ist), sondern

          li {
            min-width: 290px;
            width: calc(100% / 5 - 30px);
          }
        
        @supports (display: grid) {
          li {
            min-width: auto;
            width: auto;
          }
        }
        

        Die nicht notwendige Klammer hab ich auch gleich entsorgt.

        Es sollten sich gute Artikel zu CSS Grid finden lassen. Dieser gehört nicht dazu.

        Oder gute Video-Tutorials: in Jen Simmons’ YouTube-Kanal Layout Land.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. @@ liebewinter

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

    Opera ist seit Version 15 (2013) auch ein Chromium. MS Edge hingegen ist (noch) kein Chromium, kann aber auch CSS Grid – und zwar besser als jeder andere Browser.

    (Bleibt zu hoffen, dass Edge bei der Umstellung auf Chromium nicht einfach dessen Bugs übernimmt, sondern dass die Bugs in Chromium endlich mal gefixt werden.)

    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" ;
    }
    

    Das sind einfach alle Boxen untereinander – dafür bräuchtest du kein Grid.

    Die Anordnung der Boxen im Grid passiert wohl per media query in dem Teil, der mit

    <?php 
    
    
    include 'CSS/tablet.css';
    
    ?>
    

    eingebunden wird?

    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;
      
    }
    

    Nein. IE 10 und 11 verstehen Grid nur mit Präfix – und das nur teilweise.

    Mit den Eigenschaften ohne Präfix überschreibst du die Angaben für andere Browser – genau das, was du nicht willst. Die müssen in dem Teil für IE also weg.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar,

      kann man das nicht lösen, indem man die modernen Grid-Regeln in eine @suppports (grid-template-areas: "a") Klammer legt und damit Regeln für den Internet Explorer überschreibt?

      Rolf

      --
      sumpsi - posui - clusi
    2. Erste vielen danks für deinen empfiehlt !

      Die Anordnung der Boxen im Grid passiert wohl per media query in dem Teil, der mit

      <?php 
      
      
      include 'CSS/tablet.css';
      
      ?>
      

      eingebunden wird?

      Nein , auch ohne ihn bekomme auf Firefox Browser keine gute aussiehst...

      Die müssen in dem Teil für IE also weg.

      was würdest du mir empfiehlt zu machen wenn auch meine Grid Layout für IE erreicherbat machen möchte....

      1. @@ liebewinter

        was würdest du mir empfiehlt zu machen wenn auch meine Grid Layout für IE erreicherbat machen möchte....

        Als erstes: beschreiben oder aufmalen, wie es denn aussehen soll.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. ich möchte das sie siesht wie meine firefox aus...

          wie meine Firefox aussiehst

        2. Geschafft !

          Danke dieser Websiteich habe die lösung gefunde .

          Wie habe jetzt der Code für Firefox und IE 11 .

          body {
           
              display: grid;    
              background-color: #ebf5d7;
              margin: 5px;
              grid-gap: 5px;
              grid-template-columns: 10% 72% 17%;
              grid-template-areas:
          
               "header   header    header"
               "nav      nav          nav"
               "linkBox  main     infoBox"
               "footer   footer   footer";
          }
              
              
              
          
          body > header {
          	grid-area: header;
          	background-image: url("/Bilder/f409784856.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;
          
          }
          
          /* IE 11 */
          
          body {
             
            display: flex;
            flex-wrap: wrap;
           
            
            background-color: #ebf5d7;
            @supports (display: grid) {
              display: grid;
               grid-template-columns: repeat(4, 1fr);
            }
          } 
          
          
          body > header {
             flex-basis:100%;
             margin: 5px;
             @supports (display: grid) {
               background-image: url("/Bilder/f409784856.png");
               margin: 5px;
             }
          }
          
          body > nav {
          	flex-basis:100%;
                  margin: 5px;
                  @supports (display: grid){
          	  background-color: #d2f5c4; 
                     -ms-grid-column: 1;
                     -ms-grid-column-span: 2; 
                     -ms-grid-row: 2;
                     
                   }
          } 
          
          body > #externalLinks {
                
                flex-basis:8%;
                margin: 5px;
                @supports (display: grid) {
                   background-color:  #d2f3c6;
                   -ms-grid-column: 1;
                   -ms-grid-row: 3;
                   margin: 5px;
                 }
          }
          
          body > main {
              flex-basis:68%;
              margin: 5px;
              @supports (display: grid) {
                -ms-grid-column: 2;
                 grid-columns: 2;
                 grid-columns: 4; 
                -ms-grid-row: 3;
                -ms-grid-row-span: 4;
                display: block; 
                margin: 5px;
                grid-rows: 200px;
                background-color: #eaf6e5;
                }
          }
          
          body > #furtherInformation {
              flex-basis: 20.4%;
              margin: 5px;
              @supports (display: grid) {
                 -ms-grid-column: 3;
                 -ms-grid-column-span: 3;
                 grid-columns: 3; 
                 -ms-grid-row: 3;
                 -ms-grid-row-span: 3;
                 grid-rows: 90px;
                 background-color: #d2f3c6;
              } 
          }
          
          body > footer {
          	flex-basis:100%;
                  margin: 5px;
                  @supports (display: grid) {
                     -ms-grid-column: 1;
          	   -ms-grid-column-span: 3;
                     grid-columns: 1/3; 
                     -ms-grid-row: 6;
                     -ms-grid-row-span: 6;
                     
                     grid-rows: 70px;
                     background-color: #99ee7a;
                     grid-gap: 5px;
                    }
          }
          
          

          und mit dieser Code firefox aussiehst

          wie Firefox siehst aus

          und IE 11…

          wie IE 11 siehst aus

          ich wünsche alle euch eine Schöne Wochenende !

          1. Hallo liebewinter,

            Dein CSS ist zu großen Teilen ungültig.

            body {
            /* */
              @supports (display: grid) {
                /* */
              }
            } 
            

            @supports darf nicht innerhalb eines Regelsatzes notiert werden.

            Bis demnächst
            Matthias

            --
            Pantoffeltierchen haben keine Hobbys.
            1. und was kann machen um andere zu machen ?

              1. @@ liebewinter

                und was kann machen um andere zu machen ?

                Lesen.

                LLAP 🖖

                PS: Ich rate jetzt mal: deine Muttersprache ist Französisch?

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. nicht spanisch , aber ich dir verstehe gut...

          2. ich habe Ein Bissen der Codet korregiert und ist so geblieben..

            body {
             
                display: grid;    
                background-color: #ebf5d7;
                
                margin: 5px;
                grid-gap: 5px;
                grid-template-columns: 10% 72% 17%;
                grid-template-areas:
            
                 "header   header    header"
                 "nav      nav          nav"
                 "linkBox  main     infoBox"
                 "footer   footer   footer";
            }
            
            
            body > header {
            	grid-area: header;
            	background-image: url("/Bilder/f409784856.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;
            
            }
            
            /* IE 11 */
            
            body {
               
              display: flex;
              flex-wrap: wrap;
              autoprefixer({ grid: true })
              width: 100%;
              background-color: #ebf5d7;
              
            } 
            
            
            body > header {
               flex-basis:100%;
               background-image: url("/Bilder/f409784856.png");
                
               
            }
            
            body > nav {
            	      flex-basis:100%;
                    margin: 5px;
                    background-color: #d2f5c4; 
                    -ms-grid-column: 1;
                    -ms-grid-column-span: 2; 
                    -ms-grid-row: 2;
                       
                     
            } 
            
            body > #externalLinks {
                  
                  flex-basis:8%;
                  margin: 5px;
                  background-color:  #d2f3c6;
                  -ms-grid-column: 1;
                  -ms-grid-row: 3;
                    
                   
            }
            
            body > main {
                flex-basis:70%;
                margin: 5px;
                -ms-grid-column: 2;
                -ms-grid-column-span: 3;
                -ms-grid-row: 3;
                -ms-grid-row-span: 4;
                background-color: #eaf6e5;
                  
            }
            
            body > #furtherInformation {
                flex-basis: 18.3%;
                margin: 5px;
                -ms-grid-column: 3;
                -ms-grid-row: 3;
                -ms-grid-row-span: 3;
                background-color: #d2f3c6;
                 
            }
            
            body > footer {
            	      flex-basis:100%;
                    -ms-grid-column: 1;
            	      -ms-grid-column-span: 3;
                    -ms-grid-row: 6;
                    -ms-grid-row-span: 6;
                    background-color: #99ee7a;
                       
                    
            }
            

            Bei @supports (display: grid) haben euch rechts .., ich habe ihn gelöscht... , der rest bleibt alles...ich bekomme gleiche Bild wie der screenshot von hier ...

  3. Ähnlische wie der vorletzte Code , aber ohne "Müll"...

    body {
     
        display: grid;    
        background-color: #ebf5d7;
        
        margin: 5px;
        grid-gap: 5px;
        grid-template-columns: 10% 72% 17%;
        grid-template-areas:
    
         "header   header    header"
         "nav      nav          nav"
         "linkBox  main     infoBox"
         "footer   footer   footer";
    }
        
        
        
    
    body > header {
    	grid-area: header;
    	background-image: url("/Bilder/f409784856.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;
    
    }
    
    /* IE 11 */
    
    body {
       
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      background-color: #ebf5d7;
      @supports (display: grid) {
        display: grid;
        
      }
    } 
    
    
    body > header {
       flex-basis:100%;
       @supports (display: grid) {
         background-image: url("/Bilder/f409784856.png");
        
       }
    }
    
    body > nav {
    	flex-basis:100%;
            margin: 5px;
            @supports (display: grid){
    	  background-color: #d2f5c4; 
               -ms-grid-column: 1;
               -ms-grid-column-span: 2; 
               -ms-grid-row: 2;
               
             }
    } 
    
    body > #externalLinks {
          
          flex-basis:8%;
          margin: 5px;
          @supports (display: grid) {
             background-color:  #d2f3c6;
             -ms-grid-column: 1;
             -ms-grid-row: 3;
            
           }
    }
    
    body > main {
        flex-basis:70%;
        margin: 5px;
        @supports (display: grid) {
          -ms-grid-column: 2;
          -ms-grid-column-span: 3;
          -ms-grid-row: 3;
          -ms-grid-row-span: 4;
          background-color: #eaf6e5;
          }
    }
    
    body > #furtherInformation {
        flex-basis: 18.3%;
        margin: 5px;
        @supports (display: grid) {
           -ms-grid-column: 3;
           -ms-grid-row: 3;
           -ms-grid-row-span: 3;
           background-color: #d2f3c6;
        } 
    }
    
    body > footer {
    	flex-basis:100%;
            @supports (display: grid) {
               -ms-grid-column: 1;
    	   -ms-grid-column-span: 3;
               -ms-grid-row: 6;
               -ms-grid-row-span: 6;
               background-color: #99ee7a;
               
            }
    }
    
    1. @@ liebewinter

      body {
         
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        background-color: #ebf5d7;
        @supports (display: grid) {
          display: grid;
          
        }
      } 
      

      Welche Sprache soll das sein? CSS ist es nicht – wie ich schon sagte.

      Der @supports-Block ist hier auch völlig überflüssig. Du kannst genauso gut

      body
      {
      	display: flex;
      	display: grid;
      }
      

      schreiben. In Browsern, die Grid können, überschreibt die zweite Deklaration die erste. Browser, die kein Grid können, ignorieren die zweite Deklaration.

      body > nav {
      	flex-basis:100%;
              margin: 5px;
              @supports (display: grid){
      	  background-color: #d2f5c4; 
                 -ms-grid-column: 1;
                 -ms-grid-column-span: 2; 
                 -ms-grid-row: 2;
                 
               }
      } 
      

      Angenommen, das soll SCSS-Code sein. Dann macht das immer noch überhaupt keinen Sinn. IE versteht kein @supports; ignoriert also den ganzen Block und bekommt die für ihn gedacheten -ms--Eigenschaften überhaupt nicht zu sehen.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. ich habe gemacht wie du sagst , und bekomme dieser screenshot auf meine IE 11 ...

        wie meine IE aussieshst

        auf meine Firefox Browser sehe alles gut...

  4. @@ liebewinter

    CSS Tricks hat eine Serie von Artikeln von Daniel Tonon, beginnend mit CSS Grid in IE: Debunking Common IE Grid Misconceptions

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Viele danks für deine Link ! , auch wenn meine Probleme gelöscht habe , möchte ihn lese...

      1. Hallo liebewinter,

        auch wenn meine Probleme gelöscht habe

        😂 Netter Vertipper.

        lösen (resoldre) — löschen (esborrar).

        Bis demnächst
        Matthias

        --
        Pantoffeltierchen haben keine Hobbys.
        1. ich möchte sage, lösen.. ☺️