Flexslider 控件导航显示低于正常 CSS 仅在 Safari 中的说明

Question

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

我在我使用 Flexslider 的所有网站上都看到这种情况，但直到现在才注意到，因为在这种特殊情况下我需要 "perfect" 对齐。

这是我的 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 链接和 "disappear it" 与 text-indent: -9999px.

中有数字

屏幕截图

野生动物园：

火狐：

浏览器 11：

Flexslider 控件导航显示低于正常 CSS 仅在 Safari 中的说明

Flexslider control nav displaying below than normal CSS instructions just in Safari

html

css

safari

flexslider