CSS всплывающая проблема с IE6

Question

У меня есть HTML-страница, где я должен отображать всплывающее окно (например, всплывающую подсказку) при наведении курсора на изображение.Приведенный ниже код работает нормально в IE8 и Firefox, у меня проблема с IE6, всплывающее окно при наведении курсора не отображается.

    STYLE:
    /* css style */
    .ToolTip { position: relative; cursor: default; text-decoration: none; border: none;}

    .ToolTip a span {display: none; text-decoration: none; color: #FFFFFF; }

    .ToolTip a:hover span { overflow:hidden; text-decoration: none; display: block;
     position: absolute; width: 250px; background-color: #046C08; border: none; height: 90px;
     left: 25px; top: -10px; color: #FFFFFF; padding: 5px; line-height: 18px; z-index: 1; }

    HTML:

/* html page content */

    <p class="ToolTip">
        <a href="#">
            <img src="...." alt="" style="border: 0px;" />
     <span>
                 CSS Popup..
     </span>
        </a>
    </p>

Есть идеи, пожалуйста?заранее спасибо

Answer 1

Как сказал Happy Singh, большинство сайтов больше не поддерживают совместимость с IE6.Однако, как вы могли бы попытаться это исправить:

У вас есть много параметров в вашей таблице стилей, вы использовали их все специально или просто пытались добавить все больше и больше, чтобы это работало?

Например, посмотрите:

.ToolTip a span {display: none;текстовое оформление: нет;цвет: #FFFFFF;}

Вам не нужно объявлять здесь цвет и текстовое оформление, как будто вы уже установили display: none, элемент все равно не должен отображаться.Кстати, вы объявляете тот же цвет в состоянии: hover, так что в любом случае он тоже будет удвоен.

Поскольку код, который вы разместили, является лишь частью всего кода, я также могу только догадываться, но некоторыеподсказки, если мы посмотрим:

.ToolTip a: hover span {overflow: hidden;текстовое оформление: нет;дисплей: блок;положение: абсолютное;ширина: 250 пикселей;цвет фона: # 046C08;граница: нет;высота: 90 пикселей;слева: 25 пикселей;верх: -10px;цвет: #FFFFFF;обивка: 5px;высота строки: 18 пикселей;z-индекс: 1;}

Как сказано, переполнение не требуется: скрыто.Это просто скрыло бы текст в вашем элементе span, если бы он был длиннее, чем ширина 250 пикселей и / или высота 90 пикселей.Но это не имеет значения для вашего вопроса.

Однако, что вы, возможно, не так умны, потому что вы не объявляете какую-либо позицию для элемента span, когда он не находится, но в состоянии находится, вывнезапное добавление позиции и т. д. Я имею в виду, что если вы просто изменили видимость или отображение, элемент span не изменил бы положение.

Итак ...

Отображение: блок можно интерпретироватьстранно иногда.Позиция: абсолютная - здесь мы идем: вы разместили элемент span над изображением?Или за пределами страницы (возможно, не полностью, она может быть слишком большой для этого).Если он расположен позади изображения, вы можете попробовать изменить top, left и z-index.Если вы измените z-index, вы должны попытаться также назначить z-index изображению или удалить оба значения z-index.Если вы назначаете z-index, попробуйте установить огромную разницу между двумя значениями, или одним положительным и одним отрицательным.

В общем, старайтесь всегда начинать с минимальных параметров, необходимых для каждого элемента.Затем добавьте то, что вам действительно нужно.Попробуйте установить все параметры для элемента span отдельно и изменить только отображение.