How to ignore a specific css class property only on IE

Question

One of the css classes I am using is:

.test {
    display: inline-block;
    margin: 0 5px 0 5px;
}

which works fine in chrome. But, for some reason, I see the UI a bit messed up and if I remove display: inline-block, it looks good on IE, but then its messed up in chrome. Is there a way to ignore using display: inline-block from this class when its IE and use only when on chrome?

Not sure but I think [this](https://stackoverflow.com/questions/19383256/disable-a-css-rule-on-ie) helps — Peshraw H. Ahmed, Apr 25 '18 at 19:33
Possible duplicate of [How to target only IE (any version) within a stylesheet?](https://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet) — Adam, Apr 25 '18 at 19:45
I have provided a simple solution using javascript. You can test it in IE and any other browser to see it work. Let me know if I can help you further. — Cory Kleiser, Apr 27 '18 at 04:52

Cory Kleiser · Answer 1 · 2018-04-27T04:29:55.617

One way to do it is with javascript. The first thing you're going to want to do is check to make sure the browser is Internet Explorer. If it is, you can set the inline display style which will override what you have in your css file. I'm not sure whether you want to set the elements to display:inline; or display:block; so I will set them to display:block; in the following code snippet, just to show you how it can be done.

if (/*@cc_on!@*/false || !!document.documentMode) {
  var myTestElements = document.querySelectorAll(".test");

  for (var i = 0; i < myTestElements.length; i++) {
    myTestElements[i].style.display = "block";
  }
}
else {
  console.log("Not IE");
}

.test {
    display: inline-block;
    margin: 0 5px 0 5px;
}

<div class="test">Test1</div>
  <div class="test">Test2</div>
  <div class="test">Test3</div>
  <div class="test">Test4</div>

First I used an if statement to see if the browser is IE. Inside that I selected all the elements with document.querySelectorAll(".test");. Then in a for loop, I iterated through all the .test elements and added an inline style of display:block;. NOTE: The else statement is not necessary. I just added that for the purposes of this code snippet. I hope that helps.

How to ignore a specific css class property only on IE

1 Answers1