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

这是背景图。 ![精灵][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

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

Answer 4

1. 您可以尝试将overflow:hidden 添加到带有float:left 的元素的每个父元素吗？在这种情况下，您必须将其添加到每个 div、p 和 a。我不确定您的实际代码是否最优。
2. 此外，浮动：左；和 display: inline 一起没有意义。这可能是奇怪行为的原因。删除 display: inline （请记住将 overflow: hidden 添加到其父级），它应该可以工作。 但尚未测试。

更新：

显然正如问题的作者提到的那样 float:left + display: inline 修复了 IE6 浮动元素的双边距错误。

Answer 5

为p 或span 之类的元素定义尺寸总是介于棘手 和不可能 之间，因为它们是内联元素。我建议修改周围的块元素 div.contButton。

除了高度之外，您还应该将溢出设置为隐藏：

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