Z-index在chrome中不起作用，但在firefox中起作用

Question

我一直试图解决这个问题一段时间，但我似乎无法做到。

* {
margin: 0;
padding: 0;
}
ul.tabs {
position: relative;
list-style-type: none;
margin-left: 30px;
}
ul.tabs li {
position: relative;
display: inline-block;
z-index: -1;
color: #06E;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
padding: 0.4em 1em 0.4em 1em;
margin-right: 5px;
border: 1px solid #AAA;
border-bottom: 1px solid #FFF;
}
ul.tabs li.active {
position: relative;
z-index: 2;
}
.content {
z-index: 1;
position: relative;
margin-top: -1px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px;
border: 1px solid #AAA;
}

<ul class="tabs">
  <a href="#">
    <li class="active">-</li>
  </a>
  <a href="#">
    <li>+</li>
  </a>
</ul>
<div class="content">
  Text
</div>

在Firefox中，这有所需行为（活动（ - ）标签位于内容div之上，因此隐藏了它下面的边框。但是在Chrome中，这不会发生。

Answer 1

尝试将设置背景设置为活动列表元素。 FF似乎隐藏了z-index较低的元素背后的任何内容，而Chrome则没有。

ul.tabs li.active {
    background-color: white;
}