css - 为 IE6 和 IE7 解决这个样式问题

Question

首先我会告诉你这个问题，它只发生在 IE6/IE7 上

可以看到，当innerHtml的长度不长时，没问题；但是当它“更长”时，设置为 bg 图像的 sprite 会重复，文本会跳到下一行......

现在，CSS

.contButton {
    list-style: none;
    float: right;
}


.contButton p {
    float: left;
    display: inline; /*For ignore double margin in IE6*/
    margin: 0 0 0 10px !important;
}
.contButton a {
    text-decoration: none !important;
    float: left;
    color: #FFF;
    cursor: pointer;
    font-size: 14px !important;
    line-height: 21px;
    font-weight: bold !important;
}
.contButton span {
    margin: 0px 10px 0 -10px;
    padding: 3px 8px 5px 18px;
    position: relative; /*To fix IE6 problem (not displaying)*/
    float:left;
}
/*ESTADO NORMAL AZUL*/
.contButton p a {
    background: url(../nImg/spriteBotones.png) no-repeat right -214px;
    _background: url(../nImg/spriteBotones.gif) no-repeat right -214px;
    color: #FFF;    
}


.contButton p a span {
    background: url(../nImg/spriteBotones.png) no-repeat left -214px;
    _background: url(../nImg/spriteBotones.gif) no-repeat left -214px;
}

和 Html:

<div class="">
....
<div class="contButton mt10">
   <p><a tabindex="" title="acceder" href="#"><span>ver disponibilidad</span></a></p>
</div> 
...
</div>

这是背景图片。![ Sprite ][2]

尝试过:

<!--[if IE lte 7]>



<style type="text/css"> 
/*
.contNombrePrecioHtl .contButton p a{ height:20px;  }
.contNombrePrecioHtl .contButton p a span{ height:20px; width:auto; }  */
</style>
<![endif]-->

但这并没有解决问题...

PS: class="mt10"这只是一个margin-top:10px;

知道如何为光荣的 IE6/7 解决这个问题吗？

Answer 1

尝试将 white-space: nowrap 添加到 .contButton。