z-index и Internet Explorer 9 - PullRequest
Новая
       22

z-index и Internet Explorer 9

2 голосов
/ 28 января 2012

У меня есть 2 элемента, 2 изображения одинакового размера, расположенные друг над другом.Скажем, они называются A и B (A - верхний).Я сделал так, чтобы при наведении курсора на A его z-индекс уменьшался на 2, так что B теперь на вершине, а при наведении на B: его z-индекс увеличивается на 2, так что теперь он на 1 больше исходного Az-index (таким образом, изображение B остается сверху, пока вы не уберете мышь).Так что в основном ... 

#A {z-index: 5;}
#B {z-index: 4;}

#A:hover {z-index: 3;}
#B:hover {z-index: 6;}

Это прекрасно работает в Firefox и Chrome, но IE не хочет об этом слышать, и мои изображения продолжают появляться, пока они над ними.Любая помощь приветствуется.Позиционирование является абсолютным, если это имеет значение.

@ jklm313

Это действительно работает и в моем IE9.Может быть, я должен опубликовать полный код, так как одно из моих «изображений» на самом деле кнопка социальной сети.Итак, вот оно:

HTML: 

<div id="myTweetBrown"></div>
<div id="myTweet"><?php include ("myPHP/homepageSoc/tweet.php") ?></div>

CSS: 

#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}

#myTweetBrown:hover {
position: absolute;
z-index: 3;
}

#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 4;
}

#myTweet:hover {
position: absolute;
z-index: 6;
}

tweet.php: 

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://localhost/Joomla173/index.php?option=com_content&amp;view=article&amp;id=69&amp;Itemid=507" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Ссылка на демонстрационный сайт: ***** - прокрутите вниз до кнопки Tweet. Это будет происходить только так долго, потому что я не хочу, чтобы люди имели доступвот так <. <</p>

Ответы [ 3 ]

2 голосов
/ 28 января 2012

Просто собираюсь переписать весь мой ответ, теперь предоставлен исходный код.

Все "современные" версии IE, когда они не в режиме quirks, принимают этот код совершенно нормально для элементов div и ссылок.Проблема в IE возникает для iframes и других необычных элементов, в этот момент его механизм рендеринга, кажется, выходит из строя. (Шок!) Вы получите это мерцание без видимой причины, за исключением, возможно, конфликтующих типов документов в iframe и странице, которых я также постараюсь избежать, если это возможно.

Предполагается, что эта ссылкагенерируется твиттером, я бы посоветовал альтернативный подход для IE.Вместо того, чтобы парить между изображением вашей кнопки и изображением кнопки, предоставленной Twitter, я бы просто манипулировал css кнопки Twitter, предоставленной внутри iframe, используя javascript. 

document.getElementsByTagName('iframe')[0].getElementsByTagName('a')[0].className += 'myTweetBrown';

Кнопка выглядит генерируемой HTML5, а неБудучи статичным изображением, манипулировать им не должно быть сложно: 

.myTweetBrown:hover {
    background-image: url('../images/tweetBrown.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    height: 20px !important;
    width: 55px !important;
 }

.myTweetBrown:hover * {
    display: none;
 }

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

#myTweetBrown {
    position: absolute;
    background-image: url('../images/tweetBrown.png');
    background-repeat: no-repeat;
    background-position: center center;
    height: 20px;
    width: 54px;
    left: 381px;
    top: 662px;
    z-index: 5;
}

#myTweetBrown:hover {
    opacity: 0;
}

#myTweet {
    position: absolute;
    height: 20px;
    width: 54px;
    left: 381px;
    top: 662px;
    z-index: 3;
}
0 голосов
/ 28 января 2012

Попробуйте обернуть их в div 

.parent
{
   position:relative;
   z-index:1000;
}
.a
{
  position: absolute;
  z-index : 1001;
  display: inline-block;
}
.b
{
  position: absolute;
  z-index: 1002;
  display: inline-block;
}
0 голосов
/ 28 января 2012

Технически CSS фактически не определяет, как и когда элементы входят и выходят из состояния «зависания». Похоже, что когда A переходит под B, ваша версия IE удаляет состояние наведения из A, и он сразу же всплывает перед B, прежде чем B переходит в состояние наведения и вырывается вперед.

Как насчет того, чтобы обернуть их в div и проверить их на предмет наведения? Это работает?

http://jsfiddle.net/X64au/

...