решить эту проблему стиля для IE6 и IE7 - PullRequest
Новая
       5

решить эту проблему стиля для IE6 и IE7

0 голосов
/ 24 августа 2011

Сначала я покажу вам проблему, которая происходит только в IE6 / IE7

enter image description here

Как вы можете видеть, когда длина 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. ! [спрайт] [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?

Ответы [ 5 ]

1 голос
/ 24 августа 2011

изменить это: 

.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;
}
1 голос
/ 24 августа 2011

Попробуйте добавить white-space: nowrap к .contButton.

0 голосов
/ 24 августа 2011

Я не думаю, что это проблема с любой версией IE, возможно, просто новые браузеры менее строги к этой конкретной вещи. Я ничего не тестировал, но иногда мне помог "display: inline-block". Тем не менее, это не кажется самым эффективным решением. Ширина здесь, кажется, ограничивает, вы не должны давать вещи фиксированную ширину, если вы не хотите, чтобы текст «прыгал» во вторую строку ...

0 голосов
/ 24 августа 2011

определение размеров для таких элементов, как p oder span всегда где-то между tricky и невозможен , потому что они являются встроенными элементами. Я бы рекомендовал изменить элемент окружающего блока div.contButton.

В дополнение к высоте вы должны установить переполнение на скрытый: 

.contButton { 
    height:20px; 
    width:219px; 
    overflow: hidden;
}
0 голосов
/ 24 августа 2011
  1. Вы можете попробовать добавить переполнение: скрытое для каждого родителя элемента с помощью float: left?в этом случае вам нужно будет добавить его к каждому div, p и a.Я не уверен, является ли ваш фактический код оптимальным.
  2. Более того, float: left;и отображать: встроенные вместе не имеют смысла.Это может быть причиной странного поведения.Удалите отображение: встроенное (помните о добавлении переполнения: скрытое для его родителя), и оно должно работать.Хотя не проверял.

ОБНОВЛЕНИЕ:

очевидно, поскольку автор вопроса упоминает float: left + display: inline исправляет ошибку двойного поля IE6 для плавающих элементов.

...