I'm doing a grid with the 7 items as per the code below:
My code
nav div.grade {
display: grid;
grid-template-columns: auto auto auto auto;
margin-top: 5px;
display: -ms-grid;
-ms-flex-direction: column;
-ms-grid-auto-columns: 100px;
}
nav div.iten_grade {
width: 220px;
background-color: #d6d6d6;
text-align: center;
height: 40px;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
margin: 10px 45px 0px 45px;
/*Compatibilidade */
display: -webkit-flex;
display: -moz-flex;
display: -ms-grid;
display: -o-flex;
display: flex;
color: #555555;
-ms-float: right;
}
<div class="grade">
<div class="iten_grade">
<a href="#">1</a>
</div>
<div class="iten_grade">
<a href="#">1</a>
</div>
<div class="iten_grade">
<a href="#">1</a>
</div>
<div class="iten_grade">
<a href="#">1</a>
</div>
<div class="iten_grade">
<a href="#">1</a>
</div>
<div class="iten_grade">
<a href="#">1</a>
</div>
<div class="iten_grade">
<a href="#">1</a>
</div>
</div>
In other words, I'm making a menu in the page footer, I like the client, within a fieldset
basically according to the image:
So far so good, but the problem is that I came across clients using IE11 who simply do not have compatibility. Even using -ms-
the browser does not accept. The other browsers have accepted: Chrome, FireFoz, Edge (Safari and Opera will still test).
Is there another form of compatibility? Are there any unique compatibility tags for IE11?
Sorry if the text was confusing!