Microsoft Edge, media query doesn't work correctly

问题

I tested this media query successfully on Google Chrome but somehow Microsoft Edge has issues with it. Is something wrong with these queries? Or is it just a bug in Microsoft Edge?

UPDATE:
It looks like Edge needs a Class without Media Query, so I added .height-fix{height:650px} and it works.

@media all and (min-width:875px) and (max-width:980px) { 
.height-fix { 
  height : 610px; 
  } 
} 

@media all and (min-width:768px) and (max-width:875px) { 
.height-fix { 
  height : 575px; 
  } 
} 

@media (max-height:768px) and (min-width:1366px) and (max-width:1366px) { 
.height-fix { 
  height : 520px !important ; 
  } 
} 

This is the media query that doesn't work it should target devices with a height OVER 768px and a width OVER 1367px:

@media (min-height:768px) and (min-width:1367px) { 
.height-fix { 
  height : 650px; //this line doesn't apply
  } 
} 

回答1:

It looks like Microsoft Edge has an issue with media queries if there the class has no fallback

This means that if a css class is only specified inside a media query it sometimes won't work correctly.

So if the CSS looks like this:

@media (max-width(123px){
.height-fix {
  height: 650px
  }
}

it wont work. It should to look like this:

.height-fix{
height: 100px
}

@media (max-width(123px){
.height-fix {
  height: 650px
  }
}

来源：https://stackoverflow.com/questions/46131245/microsoft-edge-media-query-doesnt-work-correctly