Проблема Z-индекса с абсолютным позиционированным элементом в IE7 - PullRequest
Новая
       35

Проблема Z-индекса с абсолютным позиционированным элементом в IE7

2 голосов
/ 20 сентября 2011

У меня есть текстовая область с div соединителя, который представляет текущий статус пользователя. Соединитель-div расположен абсолютно так, что он вместе с текстовой областью образует пузырек разговора, чтобы символизировать то, что «говорит» пользователь. Разъем должен быть расположен «сверху» текстовой области (обычно с более высоким z-индексом), и он прекрасно работает в любом браузере, кроме IE7, который, к сожалению, я должен поддерживать. В IE7 разъем div находится ниже текстовой области, и это проблема.

Я погуглил проблему с ошибкой Z-index в IE7 и попробовал несколько решений, которые я нашел, но ни одно не решило это для моего конкретного случая.

У меня есть следующий упрощенный HTML:

"

  <form class="current-status">
    <div class="talk-bubble">
      <div class="connector"> "Absolute positioned with high z-index.." </div>
      <textarea> "User status goes here" </textarea>
    </div>
  </form>

"

current-status-div просто статически расположен, talk-bubble-div относительный, соединитель-div является абсолютным с z-индексом 4, textarea является относительным и в настоящее время не имеет z-индекса, поскольку работает везде, кроме ie7. Но я попытался установить низкий z-index на texarea и высокий на разъеме, но IE7 имеет странное стекирование.

Я пробовал множество различных решений с позиционированием, z-индексированием, упаковкой элементов и т. Д., Но, похоже, ничего не работает.

У кого-нибудь есть идея?

некоторые css связаны с проблемой: 

.content-box-plate {
    position: relative;
    z-index: auto;
}

.talk-bubble {
    position: relative;
    z-index: auto;
}

.connector {
    background: url("/images/portal/bubble_connector.png?1314369295") no-repeat scroll center center transparent;
    height: 12px;
    position: absolute;
    right: 5px;
    width: 21px;
    z-index: 4;
}
textarea {
    font-size: 13.5px;
    font-style: italic;
    height: 40px;
    line-height: 1.25em;
    overflow: auto;
    padding: 6px 6px 6px 8px;
    position: relative;
    width: 165px;
    z-index: auto (tried to put a specific value lower than connectors without effect)
}

1 Ответ

0 голосов
/ 20 сентября 2011

Без вашего кода сложно ответить, однако вам нужно также установить z-index для родительских divов, это общая проблема, которую я исправляю в IE6 / 7, так как я также должен их поддерживать.

Возможно, вам не нужно подниматься до формы, но без вашего css и его просмотра трудно сказать - это или около того все же исправят!

Вам нужна позиция, чтобы иметь действительный z-индекс, не беспокойтесь о других z-индексах на странице и т. Д., Поскольку они инкапсулированы в форме; Конечно, измените значения на то, что вы хотите, но это порядок. 

<form class="current-status" style="position:relative; z-index:1;">
    <div class="talk-bubble" style="position:relative; z-index:1;">
      <div class="connector" style="position:absolute; z-index:2"> "Absolute positioned with high z-index.." </div>
      <textarea style="position:relative; z-index:1"> "User status goes here" </textarea>
    </div>
</form>
...