IE browser css adaptive writing problem

[Claire Liu]

Hello everyone, I'm having some code issues while doing screen adaptation in IE11, I would like to ask for your help. I am building a website in wordpress, and I need to make some adaptive adjustments for IE 11 browser. I tried various hacks and I found:


@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){


The method shown above is the only method that works for IE11, but with this method, I can’t do other screen adaptations for IE11.

Like this:


@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){

.section1 li:before {
content: ' ';
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #4869b2;
position: absolute;
left: 70px;
opacity: 0.3;}
.section6 .col-5{position:relative\0;padding:0px\0;}
.section6 .col-5 img:nth-child(1){max-width:180px;position:absolute;left:100px;top:0;}
.section6 .col-5 img:nth-child(2) {position:absolute;right:70px;top:50px;margin-top:0;}
.section6 .col-5 img:nth-child(3) {position:absolute;left:180px;top:270px;}
.section6 .col-5 img:nth-child(4) {position:absolute;right:0px;top:220px;margin-top:0%;}
.section8 .col-5:before{content: ' ';width: 500px;height: 320px;background: #4869b2; position: absolute;left: -50px;top: -60px; z-index: -1;opacity: 0.3;}
}

@media screen and (max-width:1350px)((-ms-high-contrast:active),(-ms-high-contrast:none){
.block1{height:375px;}
.section6 .col-5 img:nth-child(1){left:70px;}
.section6 .col-5 img:nth-child(3){left:150px;}
}
@media screen and (max-width:1200px),(-ms-high-contrast:active),(-ms-high-contrast:none){
.map ul li{height:180px;}
.section6 .col-5 img:nth-child(1){left:10px;}
.section6 .col-5 img:nth-child(3){left:90px;}
}

@media screen and (max-width:1100px),(-ms-high-contrast:active),(-ms-high-contrast:none){
.map ul li{height:180px;}
.section6 .col-5 img:nth-child(1){left: 0;max-width:160px;}
.section6 .col-5 img:nth-child(2){right:50px;}
.section6 .col-5 img:nth-child(3){left:60px;}
.section6 .col-5 img:nth-child(4){max-width:240px;}
}


If I write adaptive like this, ie11 will only quote the css style under the last 1100px. I think that my writing is wrong, but I can't find the correct method that can be recognized by IE11.

Continue reading...