Safari 8文本縮進問題

Question

我們剛剛推出了一個新網站，並且在使用文本縮進的舊版Safari中遇到了一些問題。下面提供了一個實時鏈接，希望有人能幫我調試這個問題？我從來沒有遇到過文字縮進問題。

HTML

<ul> 
    <li><a href="#previous" id="slide-prev">Prev</a></li> 
    <li><a href="#next" id="slide-next">Next</a></li> 
    <li><a href="#scroll-down" id="scroll-down">Scroll Down</a></li> 
</ul> 

CSS

li { 
    padding: 2px 0; 
    display: inline-block; 
    vertical-align: text-top; 
    font-size: 0.9em; 
    overflow: hidden; 
} 

#slide-prev, #slide-next, #scroll-down { 
    margin-left: 10px; 
    padding: 0; 
} 

#slide-prev { 
    width: 18px; 
    height: 14px; 
    background: url(images/ui-sprite.svg) no-repeat 0 -406px; 
    text-indent: -9999px; 
} 

#slide-next { 
    width: 18px; 
    height: 14px; 
    background: url(images/ui-sprite.svg) no-repeat -40px -406px; 
    text-indent: -9999px; 
} 

#scroll-down { 
    width: 14px; 
    height: 14px; 
    background: url(images/ui-sprite.svg) no-repeat -80px -406px; 
    text-indent: 9999px; 
} 

Cross Browser Screenshots

Live Link

Answer 1

我已經解決了與此article幫助這個問題。

text-indent只適用於塊級元素，所以這是一個添加到CSS的情況。根據@ paul-redmond的建議，我已將文本縮進技術更改爲包含white-space和overflow，以獲得更全面的證明文本縮進解決方案。

但是關鍵在於塊級元素。

CSS

#slide-prev, #slide-next, #scroll-down { 
    margin-left: 10px; 
    padding: 0; 
    display: block; 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
} 

Answer 2

更好的辦法隱藏文字是使用這種方法：

.hide-text{ 
    text-indent: 101%; 
    white-space: nowrap; 
    overflow: hidden; 
} 

.slide-prev { 
    width: 18px; 
    height: 14px; 
    background: url(images/ui-sprite.svg) no-repeat 0 -406px; 
} 

您可以將此類添加到每個項目以隱藏文字。在你的代碼中，你重複了很多，我也不會推薦在你的CSS中使用這樣的ID。

<li><a href="#previous" class="hide-text slide-prev" id="slide-prev">Prev</a></li>