Flexslider控制导航只是在Safari

我使用 Flexslider创造一些画廊，和我的造型 flex-control-nav

显示比正常的CSS指令下面，但我意识到，在下面显示比正常只是在Safari：Flexslider控制导航只是在Safari

enter image description here

我看到这发生在我使用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

来源

2015-07-03 Jabel Márquez

变化

.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链接中有数字，并且通过text-indent: -9999px“消失”。

SCREENSHOTS

Safari浏览器： enter image description here

火狐：

的Internet Explorer 11： enter image description here

来源

2015-07-06 18:33:28 IMI

其实I J ust需要'line-height：0px' ...使用'line-height'是有道理的，因为Flexslider中的'control-nav'在链接中有数字，并且用'text-indent：'消除它。 9999px'。非常感谢您的帮助，您的解决方案很有用！我认为Flexslider应该解决这个小问题。 –

关于'position：absolute'你是对的，但是Flexslider的“默认”行为，'position：relative'会改变我的'bottom'值。 –

Flexslider控制导航只是在Safari

回答

相关问题