IE 6 z-индекс и позиция: исправлено; проблема

ProgramBox

IE 6 z-индекс и позиция: исправлено; проблема

Post author:admin
Запись опубликована:20 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Вот проблема, которую я пытался решить какое-то время! Я искал все решения, но не смог их найти. Для начала вот как структурирован мой html (только скелетная структура) —

 <body>
  <div class="header"> </div>
  <div id="content-wrapper">
  <a href="/some.html"><div class="feedback_div"></div></a>
  </div>
  <div id="footer-wrapper"></div>
</body>

Теперь мой .feedback div был установлен в фиксированное положение и задан top: 40%; и right: 0; и z-index тоже (конечно). Хотя это нормально работает во всех браузерах, как обычно, IE 6 все портит. Итак, чтобы воспроизвести его влияние на IE 6, я получил это решение —

 /* IE 6 only */
* .feedback_div
{
    z-index: 9998;
    position: absolute;
    top: expression( (( t=document.documentElement.scrollTop) ? t: document.body.scrollTop)  'px');
    right: -140px;
}
* #content-wrapper
{
    position: relative;
    z-index: 9999;
}
* #footer-wrapper
{
    z-index: 0;
    position: relative;
}
* html 
{
overflow: auto;
}
* html body 
{
height: 100%; /* required */
}
/* END: IE 6 only */

Но теперь проблема в том, что, хотя .feedback div следует за вами при прокрутке, когда он достигает .footer div, за ним следует feedback div. Я попытался поиграть с z-индексом, но ничего не получилось.

Теперь я знаю, что идеальным решением было бы переструктурировать html таким образом, чтобы .feedback div был дочерним <body> . Но я не собираюсь менять структуру, потому что это означало бы возиться с серверной частью. Я пытаюсь решить это только для ie.. так что даже какой-то взлом подойдет, если он работает так, как задумано.

Итак, есть ли у кого-нибудь решение для этого? Любая помощь будет оценена.

Ответ №1:

В коде есть некоторые ошибки:

У вас есть div тег внутри a тега, который недействителен. Браузеры будут перемещать div элемент за пределы a элемента.
У вас есть class="feedback" div , но вы используете .feedback_div в CSS, поэтому стиль не будет применяться.

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

1. Привет, спасибо, у меня была какая-то ошибка в коде здесь, я скопировал / вставил css, забыл изменить селекторы, извините за это.

2. Что касается вашего решения, вы можете видеть, что я применяю z-index к #content-wrapper и #footer-wrapper. И из-за того, что div находится внутри тега <a>, я знаю, что это не семантически правильно, но я хотел избежать дополнительного тега с (который я бы ввел) структурой div>a>span . И он отлично работает во всех браузерах, даже в IE6, я не вижу, чтобы он перемещался из тега <a> в DOM

3. @ShalomSam: Я понимаю… z-индекс должен работать, но наличие блочных элементов внутри встроенных элементов определенно вызовет у вас проблемы. Возможно, вы также столкнулись с ошибкой z-index, из-за которой IE игнорирует z-индекс, если родительский элемент не имеет z-индекса: richa.avasthi.name/blogs/tepumpkin/2008/01/11 /…

4. я попытался указать его родительский элемент.. который в данном случае является телом с z-индексом. Но это тоже не помогло.

Ответ №2:

Если я правильно помню, для IE6 вам нужно установить zoom: 1 для корректной работы z-index.

1. хм.. но к какому элементу мне применить это свойство??

2. я пытался использовать zoom: 1; для каждого использования z-index. Но, похоже, это тоже не помогает

3. Можете ли вы разместить файлы где-нибудь в Интернете и ссылаться на них? Возможно, я смогу быть более полезным, если смогу увидеть полный результат в браузере.

4. вы увидите кнопку обратной связи с правой стороны (во всех браузерах, кроме IE6)

Метки: IE 6 z-индекс и позиция: исправлено; проблема