For IE 9 and lower, load a conditional stylesheet:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
IE 10 and up doesn't support this, so you have to use media queries:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS */
}
For Edge 12-15:
@supports (-ms-accelerator:true) {
/* Edge 12+ CSS */
}
EDIT
For Edge 16+
@supports (-ms-ime-align:auto) {
/* Edge 16+ CSS */
}
Let's say I want to detect if it is IE or Edge then the backgournd shouldn't be fixed, what should I do?
You'd have to post your code and explain what you're trying to do.
disabling broken parallax for IE and Edge
thank you, Can I ask one more question? what is the difference between -ms-accelerator and -ms-ime-align:auto? I just saw someone mentioned that as well for Edge. Thank you
Both are simply CSS hacks. Basically you're checking to see if the browser supports a specific feature by "sniffing" for it. In this case, ms-accelerator is a hardware accelerator supported by edge, and ms-align-auto aligns the Input Method Editor. What they do is irrelevant to your situation. The point is that you can use them to sniff out browsers and apply conditional CSS. I digress though, this is likely temporary. As new browser versions and features are released, you will need to update these 'hacks'. Javascript feature detection is the best way forward. Google it.