html - Z-index doesn't work in chrome but does in firefox -
i've been trying fix while don't seem able to.
* { 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>
in firefox has wanted behavior (the active (-) tab being above content div therefore hiding border underneath it. in chrome however, not happen.
try settings background active list element. ff seems hide behind elements lower z-index, while chrome not.
ul.tabs li.active { background-color: white; }
Comments
Post a Comment