css - Firefox 中的图像替换不会隐藏文本

Question

我使用的是旧版本的 FlexSlider（v1.4，主要是因为我还没有时间测试新版本），出于某种原因，控件的文本显示在 Firefox 中。

这是箭头的 CSS：

  .flex-direction-nav li a {
    display: block;
    width: 52px; height: 52px;
    margin: -13px 0 0;
    background: url(../images/bg_direction_nav.png) no-repeat;
    position: absolute; top: 50%;
    cursor: pointer;
    text-indent: -999em;
  }

我试过改变text-indent周围，但文本没有移动。text-align: left当我在 Firebug 中更改它时，这似乎不是问题。此问题未在 Chrome 中显示。

为什么文本不隐藏自己？

Answer 1

我遇到了同样的问题。我的问题是导航链接继承了“text-align：right;”。

尝试重置您的 text-align 属性：

    .flex-direction-nav li a {
    display: block;
    width: 52px; height: 52px;
    margin: -13px 0 0;
    background: url(../images/bg_direction_nav.png) no-repeat;
    position: absolute; top: 50%;
    cursor: pointer;
    text-indent: -999em;
    text-align:left;
  }

此外，对于 IE 调试，请记住，在较低版本中 text-indent 仅在您设置了 text-transform 属性时才有效......所以只需添加

text-transform: uppercase;

会帮助...