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

回答

相關問題