如果存在其他具有相同类名的元素，则 Internet Explorer CSS 类样式不适用

Question

我有一个困扰我将近一周的问题！！

这是场景，

我有 6 个步骤选项卡、步骤 1 选项卡、步骤 2 选项卡等等。 我有一个名为“locked”和“active”的 css 类。

"locked" - 它的样式top: 3em; 会导致标签向下一点，然后我有一些元素会阻止它，所以标签会隐藏在它的后面element 那么这就是它被锁定的原因。

"active" - 它的样式top: 0em; 会导致标签上升，然后它会变得可见，因此您现在可以单击标签。

现在，我的 javascript 代码上有一个事件。如果该事件触发，我将添加“活动”类并使用 jQuery 删除“锁定”类。 $("#step1").addClass("active").removeClass("locked");

因此该特定步骤将变为活动或可见（在我的示例步骤 1 中），然后其他步骤不可见。所以现在有一个类 locked 的元素是第 2 步，第 3 步到第 6 步。

然后事件将触发到另一个步骤，依此类推......直到第 6 步。 然后所有步骤将变得可见。

这适用于 chrome 和 mozilla，但不适用于 IE

在 Internet Explorer 上，即使删除了 locked 类并添加了 active 类，样式也不会应用，为什么？因为类锁定还有其他步骤。只有在没有其他类名锁定的步骤选项卡时才会显示。所以简而言之，在最后一步删除类 locked 后，所有步骤选项卡都将变得可见。

编辑：

这是我的html代码

.step_tab.locked {
  color: #797979;
  cursor: default;
  top: 3em;
}
.step_tab.active {
  background: #54B848;
  cursor: default;
  top: 0em;
}

<nav>
  <ul>
    <li><a class="step_tab step1 active"><span class="step_label">Step</span> <span class="digit_label">1</span></a>
    </li>
    <li><a class="step_tab step2 locked"><span class="step_label">Step</span> <span class="digit_label">2</span></a>
    </li>
    <li><a class="step_tab step3 locked"><span class="step_label">Step</span> <span class="digit_label">3</span></a>
    </li>
    <li><a class="step_tab step4 locked"><span class="step_label">Step</span> <span class="digit_label">4</span></a>
    </li>
    <li><a class="step_tab step5 locked"><span class="step_label">Step</span> <span class="digit_label">5</span></a>
    </li>

  </ul>
</nav>

如果您注意到，所有 step_tab 都已锁定。然后是事件触发器，我将在 step_tab 上添加和删除类。通过按 F12 检查 DOM，jQuery addClass 和 removeClass 正在工作。唯一的问题是，即使我删除了类 locked 并将其更改为 active 比如说 step1，它也不会适用于那个，因为 IE 可以看到另一个元素具有类 locked

的相同父元素

Answer 1

我解决了我的问题。 我有课

.step_tab { display: block; }

我只是将显示更改为 inline-block annnnddd 我不知道它刚刚解决了我的问题 xD