Html, doubts about compatibility with Internet Explorer

Navigation
-1

I do not know why but my site gets broken in Internet Explorer and Microsoft Edge. In Firefox, Google Chrome and Opera Web the site is normal. The only parts of the site that are broken are Aside and Footer

I saw a post here in stack overflow where a guy was talking about a tag "@supports" and "-ms-".

In my script I use the Grid system.

I'm a beginner, I just learned the basics of CSS and HTML.

This is the top of my script that contains the Grid codes. 

body{
    padding: 0; margin: 0;
    font-family: 'Roboto', sans-serif;
}
#main {
    display: grid;
    grid-template-areas: "header header" "nav nav" "content aside" "footer footer";
}
.mainHeader {grid-area: header; background: #1A1A1A; height: 100px;}
.logo {margin: 12px 10px 10px 98px;}
.mainNav {grid-area: nav; background: #333333; margin-top: -19px;}
.mainContent {grid-area: content; background: #f8f8f8; margin-left: 200px; margin-right: 200px; width: 550px; margin-bottom: -570px; margin-top: 23px; height: 1000px;}
.mainAside {grid-area: aside; background: #f8f8f8; margin-right: 200px; margin-left: -200px; width: 407px; margin-bottom: -570px; margin-top: 23px; height: 1000px;}
.mainFooter {grid-area: footer; background: #1A1A1A; height: 19px;}

In Internet Explorer:

InInternetExplorer:Footer..

Inotherbrowsers:

    
asked by anonymous 09.08.2018 / 20:25

1 answer

1

It does not have polyfill or autoprefixer that will solve 100% of this, display: grid is something super new, of course maybe for IE11: 

#main {
    display: grid;
    display: -ms-grid;
    grid-template-areas: "header header" "nav nav" "content aside" "footer footer";
}

Resolve partially, but for grid-template-areas it will not have anything for IE, what you will have to do is use: 

grid-template-rows: ...;
grid-template-columns: ...;

-ms-grid-template-rows: ...;
-ms-grid-template-columns: ...;

And it will probably pack up a lot, but there are no guarantees, the support is partial, and if you want something more, it is likely that it will not work, or that it will work hard.

In short, it was already possible to do layouts without the use of grids or flex, please do not understand how to criticize, but as an orientation, learn grids without learning the basics of CSS and HTML, such as:

  • CSS 1
  • CSS 2.0
  • CSS 2.1
  • DOCTYPE

And wanting to start using grid, flexbox and the like is like learning to drive without having learned to walk (forgive me for forced analogy), has no middle ground, or you learn the basics or you will suffer when you should not .

I honestly do not see why this exaggerated fixation of people with FLEX and GRID in basic things , really can simplify everything, even bootstrap3 that is still the most used of the "4" use none of this.

Understand that IE will never receive news, the new IE is named Edge, it is the updated version of IE, it is IE, only renamed, has a new engine and supports most of the technologies, IE9 , 10 and 11 are old browsers, in a versioning logic it does not make sense to add new things, being that we have IE 12 (now called MSEdge) and up to 16 (as of 9/8/2018), if they I have an old computer with Firefox 3.6 but I never expected it to support CSS3 just because it is installed there.

  

Note @supports is also new and is only supported by MS Edge 12, ie it does not work in IE11 so you can create a fallback.

The problem is honestly linked to articles, videos and news and how they are transmitted to those who are learning now, they talk about CSS3 as if CSS2 does not work anymore, and that CSS3 is: 

CSS1 + CSS2 + Novidades = CSS3

I see many answers here on the site that still encourage misunderstanding, I can not go against it, it's complicated to explain to one by one that your answers are teaching wrong or leading to error.

Then learn CSS1 and CSS2 is to learn CSS3, as they are part of CSS3 yet, nothing has been replaced, it has only been added.

If you want to support old browsers, then do as such and use what is supported by the browser, MDN is a good site to help, there is also the caniuse:

There are other sites, but I do not recommend it, either because they are not good sources , or because they are too technical readings for those starting out.

  

If I introduce the HTML part I can even suggest how to do this without using GRID and that will work fine even in IE8.

    
09.08.2018 / 21:47
What happened and how can I solve it? (react-native run-android) Using mysql_num_rows with PDO [closed]