解决IE6和IE7的这种风格问题

Question

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

正如你所看到的，当innerHtml的长度不长时，没问题;但是当它“更长”时，精灵设置为bg图像会重复，文本会跳转到下一行......

现在，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>

这是bg Image。 ！[精灵] [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。

Answer 2

改变这个：

.contButton span {
  margin: 0px 10px 0 -10px;
  padding: 3px 8px 5px 18px;
  position: relative; /*To fix IE6 problem (not displaying)*/
  float:left;
  white-space: nowrap;
}

Answer 3

1. 你可以尝试使用float：left添加溢出：隐藏到每个元素的父元素？在这种情况下，你必须将它添加到每个div，p和a。我不确定您的实际代码是否最佳。
2. 此外，浮动：左;和显示：内联在一起毫无意义。这可能是奇怪行为的原因。删除显示：内联（记得关于添加溢出：隐藏到其父级），它应该工作。 尚未测试过。

更新：

显然作为问题的作者提到浮动：左+显示：内联修复浮动元素的IE6双边距错误。

Answer 4

我不认为这两个IE版本都有问题，可能只是较新的浏览器对这个特定的东西不那么严格。我没有测试任何东西，但“display：inline-block”有时帮助了我。它似乎仍然不是最有效的解决方案。宽度似乎在这里是有限的，如果你不希望文本“跳”到第二行，你不应该给这个东西一个固定的宽度......

Answer 5

定义p或span等元素的维度始终位于棘手和不可能之间，因为它们是内联元素。我建议修改周围的块元素div.contButton。

除了高度，你应该将溢出设置为隐藏：

.contButton { 
    height:20px; 
    width:219px; 
    overflow: hidden;
}