我正在使用materialize.css作为我的前端,我设置了标签指示器。看来这个标签的链接有问题。它在其他浏览器上工作正常,但Safari上有问题。这是截图。
顶部:Safari,Bottom:其他浏览器
这是我的样式表。
#siteplan-content .section #siteplan-tabs {
padding-top: 55px;
}
#siteplan-content .section #siteplan-tabs ul li {
display: block;
z-index: 99;
color: #fff;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
}
#siteplan-content .section #siteplan-tabs ul.tabs {
background-color: #000;
font-family: 'Fontin', regular;
font-size: 1.2vw;
left: -11.4px;
z-index: 62;
}
#siteplan-content .section #siteplan-tabs ul li a,
#siteplan-content .section #siteplan-tabs ul li a.active {
color: #fff !important;
letter-spacing: 0.2rem;
z-index: 62 !important;
}
#siteplan-content .section #siteplan-tabs ul li a.active {
color: #fff !important;
letter-spacing: 0.2rem;
/*z-index: 10002 !important;*/
opacity: 1 !important;
}
#siteplan-content .section #siteplan-tabs ul.tabs .indicator {
background-color: #7e735b;
height: 48px;
bottom: 0;
z-index: 61;
}
这是标记:
<div class="col s12 m12 center" id="siteplan-tabs" style="color: #fff !important;">
<ul class="tabs hide-on-small-only">
<li class="tab col s2"><a class="active" href="#test1" onclick="siteplan()"><?php echo getSiteplanTitle('2') ?></a></li>
<li class="tab col s2"><a href="#regent-content" onclick="regent()"><?php echo getSiteplanTitle('3') ?></a></li>
<li class="tab col s2"><a href="#signature-content" onclick="signature()"><?php echo getSiteplanTitle('4') ?></a></li>
<li class="tab col s2"><a href="#titan-content" onclick="titan()"><?php echo getSiteplanTitle('5') ?></a></li>
<!-- <li class="tab col s2"><a href="#ultimate-content" onclick="ultimate()">Ultimate</a></li> -->
<li class="tab col s2"><a href="#venture-content" onclick="venture()"><?php echo getSiteplanTitle('7') ?></a></li>
</ul>
</div>
仅供参考:我正在使用Safari 5.1.7 for Windows。