Question

我使用的其中一个css类是：

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

在chrome中工作正常。但是，出于某种原因，我看到UI有点混乱，如果我删除display：inline-block，它在IE上看起来不错，但随后它在Chrome中搞砸了。是否有一种方法可以忽略使用display：来自此类的内联块，当它的IE和仅在chrome上使用时？

Answer 1

一种方法是使用javascript。您要做的第一件事是检查以确保浏览器是Internet Explorer。如果是，则可以设置内联显示样式，该样式将覆盖css文件中的内容。我不确定您是否要将元素设置为display:inline;或display:block;，因此我会在以下代码段中将它们设置为display:block;，以向您展示如何完成

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>

首先，我使用if语句来查看浏览器是否为IE。在里面，我选择了document.querySelectorAll(".test");的所有元素。然后在for循环中，我遍历所有.test元素并添加了内联样式display:block;。注意：不需要else语句。我刚刚添加了这个代码片段的目的。我希望有所帮助。

如何仅在IE上忽略特定的css类属性

1 个答案: