Flexslider控件导航在Safari中仅显示正常的CSS指令

Question

我正在使用Flexslider来创建一些画廊，而且我正在为flex-control-nav设计样式，但我意识到在Safari中显示的情况低于正常情况：

我发现这种情况发生在我使用Flexslider的所有网站上，但直到现在才注意到，因为在这种特殊情况下我需要“完美”对齐。

这是我的CSS样式flex-control-nav：

.mariano-galeria .flex-control-paging li a {
    width: 30px;
    height: 6px;
    background: #666;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.mariano-galeria .flex-control-nav {
    height: 6px;
    max-width: 100%;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 4px;
}

知道如何在Safari中修复此对齐方式吗？在所有其他浏览器中都可以。

您可以看到我的live demo here

Answer 1

更改

.mariano-galeria .flex-control-nav {
    bottom: 4px;
    height: 6px;
    left: 0;
    margin: auto;
    max-width: 100%;
    right: 0;
}

至

.mariano-galeria .flex-control-nav {
    height: 6px;
    left: 0;
    right: 0;
    max-width: 100%;
    position: relative; /* Do not need "position:absolute;" since you are not positioning the navigation on top of the slider */
    line-height: 0; /* it seams Safari was adding extra line-height space */
}

JMarqz评论：这里的真正诀窍是 line-height: 0 。并且有意义，因为Flexslider在flex-control-nav链接中有数字并且＆＃34;消失它＆＃34;与text-indent: -9999px。

<强>截图

Safari中：

<小时/> 火狐：

<小时/> Internet Explorer 11：