text-indent CSS属性不会在引导滑块上隐藏文本

Question

我正在使用Twitter Boostrap轮播来显示3个单独的滑块，每个滑块都有一个背景图像，还有一个“更多”按钮，我将其显示为图像：

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <div class="fill" style="background-image: url('/content/images/slider/header-1.jpg');">
                <div class="container">
                    <div class="span6">
                        @Html.ActionLink("More", "MoreInfo1", null, new { @class = "morebutton" })
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="carousel-inner">
        <div class="item">
            <div class="fill" style="background-image: url('/content/images/slider/header-1.jpg');">
                <div class="container">
                    <div class="span6">
                        @Html.ActionLink("More", "MoreInfo2", null, new { @class = "morebutton" })
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="carousel-inner">
        <div class="item">
            <div class="fill" style="background-image: url('/content/images/slider/header-1.jpg');">
                <div class="container">
                    <div class="span6">
                        @Html.ActionLink("More", "MoreInfo3", null, new { @class = "morebutton" })
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

显示more按钮的类具有以下CSS属性：

a.morebutton
{
    background: url(/Content/Images/more.png) no-repeat top left;
     display: block;
     width: 80px;
     height: 25px;
     margin-top:15px;
     text-indent: -9999px; /* hides the link text */
}

不幸的是，当text-indent在第一个滑块上工作时，文本覆盖在第二个和第三个上的图像上。任何想法如何解决？