Change css when the site opens in ie/edge

Question

I made a new page for a site and I’m having problems with the visualization of this page in ie/edge. (basically it’s just the margin-left of an element)

For the search I did there is no more way to load a specific css if it is identified that the browser is ie/edge.

I tried to use css hack but did not understand how it works.

I have tested the page in most browsers and works perfectly, and as always only ie the problem.

Answer 1

I found these posts that might help you:

• problems-with-layout-e-css-in-ie-10-E-11
• hack-css-to-work-only-on-internet-edge
• how-to-write-a-css-hack-for-ie-11? (post in English)
• get-ie8-conditional-style-sheet-for-Responsive-web-design-to-work (post in English)
• put-browser-specific-condition-in-css-selector (post in English)

See now some of the possible solutions described in the references. It is important that you find out how these hacks work, where they come from and how or why to use them, that is, in what situations it would be appropriate to use them.

Example that can be used to fix layout issues in IE10/11

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* IE10+ specific styles go here */

}

Some hacks for IE and Microsoft Edge Windows 10

IE 6

* html .ie6 {property:value;}

IE 7

*+html .ie7 {property:value;}

IE 6 and 7

@media screen\9 {
.ie67 {property:value;}
}

or

.ie67 { *property:value;}

IE 6, 7 and 8

@media \0screen\,screen\9 {
.ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

or

@media \0screen {
    .ie8 {property:value;}
}

IE 8, 9 and 10

@media screen\0 {
.ie8910 {property:value;}
}

IE 10

_:-ms-lang(x), .ie10 { property:value\9; }

Edge

@supports (-ms-ime-align:auto) {
  .selector { property:value; } 
}