DIV 颜色在 IE 中无法正确显示

Question

我正在ORACLE APEX 使用自定义主题开发应用程序。

应用程序在除 IE 之外的所有浏览器中都能完美运行，但 IE 无法正常显示颜色。

这个结果来自我的 chrome 浏览器。

现在在 Internet Explorer 8 (IE8) 中，这一切都搞砸了，颜色效果无法正常显示。

这是我的CSS 1,2,3,4 <div>

.top-tabs .tab:nth-child(1),.head1 .region-header {
   background-color: #014fa2;
}

.top-tabs .tab:nth-child(2),.head2 .region-header {
   background-color: #1e69b9;
}

.top-tabs .tab:nth-child(3),.head3 .region-header {
   background-color: #3481d2;
}

.top-tabs .tab:nth-child(4),.head4 .region-header {
   background-color: #58a1f0;
}

这是我的HTML

<ul class="top-tabs">
    <li class="tab">
      <a href="#">
        <div class="top-tab-nr">1</div>
        <div class="top-tab-label">Admission<br>Application</div>
      </a>
    </li>

    <li class="tab">
      <a href="#">
        <div class="top-tab-nr">2</div>
        <div class="top-tab-label">Pay<br>Application Fee</div>
      </a>
    </li>

    <li class="tab">
      <a href="#">
        <div class="top-tab-nr">3</div>
        <div class="top-tab-label">Submit<br>Required Documents</div>
      </a>
    </li>

    <li class="tab">
      <a href="#">
        <div class="top-tab-nr">4</div>
        <div class="top-tab-label">Sign up<br>Information</div>
      </a>
    </li>
</ul>

有什么帮助/指南可以克服这个吗？？

Answer 1

无需 JavaScript...

选项 A
给每个列表项一个类，就像你做标题一样。

选项 B
使用+ (adjacent sibling) 选择器。像这样：

.top-tabs .tab:first-child,.head1 .region-header {
   background-color: #014fa2;
}

.top-tabs .tab:first-child + .tab,.head2 .region-header {
   background-color: #1e69b9;
}

.top-tabs .tab:first-child + .tab + .tab,.head3 .region-header {
   background-color: #3481d2;
}

.top-tabs .tab:first-child + .tab + .tab + .tab,.head4 .region-header {
   background-color: #58a1f0;
}

试试看：http://jsfiddle.net/3q9cD/