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

隐藏文字的更好方法是使用此方法：

.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>

Answer 2

我已在此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;
}

Safari 8文本缩进错误

2 个答案: