z-index 和 Internet Explorer 9

Question

我有 2 个元素，2 个尺寸完全相同的图像，一个在另一个之上。假设它们被称为 A 和 B（A 是最上面的）。我所做的是，当您将鼠标悬停在 A 上时，它的 z-index 递减 2，因此 B 现在位于顶部，并且 B 的悬停：将其 z-index 增加 2，因此它现在比 A 的原始值高 1 z-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>

演示网站链接：***** -- 向下滚动到推文按钮 这只会持续这么长时间，因为我不希望人们有这样的访问权限<.>

Answer 1

现在已经提供了源代码，只是要重写我的整个答案。

所有“现代”版本的 IE，当不处于 quirks 模式时，接受此代码对 div 和链接完全没问题。 IE 中的问题出现在 iframe 和其他不寻常的元素上，此时它的渲染引擎似乎失败了。 （震惊！）你会在没有明显原因的情况下得到这种闪烁，除了 iframe 和页面中的冲突文档类型，如果可能的话，我也会尽量避免。

假设此链接是由 twitter 生成的，我建议使用 IE 的后备方法。我不会在您的按钮图像和 twitter 提供的按钮图像之间悬停，而是使用 javascript 操作 iframe 内提供的按钮 twitter 的 css。

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;
}

Answer 2

从技术上讲，CSS 实际上并没有指定元素如何以及何时进入和退出“悬停”状态。所以听起来当 A 低于 B 时，您的 IE 版本从 A 中删除了悬停状态，并立即弹回到 B 前面，然后 B 获得悬停状态并进一步弹到前面。

如何将两者包装在一个 div 中，并测试其悬停状态？这行得通吗？

http://jsfiddle.net/X64au/

Answer 3

尝试将它们包装在一个 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;
}