z-index和Internet Explorer 9

我有2个元素，2个尺寸完全相同的图像，一个位于另一个之上。说他们被称为A和B（A是最高的）。我所做的就是当你把鼠标悬停在A上时，它的z-index减少2，所以B现在在最上面，而B的悬停：它的z-索引增加2，现在比A的原始值增加1 z-index（因此图像B保持最佳状态，直到您移除鼠标）。所以基本上...z-index和Internet Explorer 9

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

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

这工作完全在Firefox和Chrome，但IE不希望听到它，我的图片，同时不断盘旋在他们spazzing。任何帮助表示赞赏。定位是绝对的，如果这很重要。

@ 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按钮这将只会持续很长时间，因为我不希望人们有这样的访问<。 <

来源

2012-01-28 GTCrais

听起来很像http://jhop.me/tests/bugs/ie8/dynamicstackingcontext.html - http://jhop.me/ie8-bugs第56号。 – 2012-01-28 01:43:10

从技术上讲，CSS实际上并未指定元素如何以及何时进入和离开“悬停”状态。所以听起来好像A在B之下时，IE的版本从A中删除了悬停状态，并且在B获得悬停状态并在前面进一步弹出之前，它立即弹回B的前面。

如何将两个包装在一个div中，然后测试悬停状态？那样有用吗？

http://jsfiddle.net/X64au/

来源

2012-01-28 01:50:10

nope，它适用于FF和Chrome，但不在IE中。 = /谢谢，但。 – GTCrais 2012-01-28 02:03:16

值得一试。推测JavaScript按钮可能会做各种恶作剧，我猜。 – 2012-01-28 02:10:21

这个应该发生在元素最初悬停的时候，但是当鼠标停留在它上面时，b元素应该保持悬停状态，所以当鼠标首先移动到元素上时，除了闪烁之外，不应该出现“spazzing”。确切地说，是 – lpd 2012-01-28 02:11:50

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

所有“现代”版本的IE，如果不是在怪癖模式下，接受这个代码完全适用于div和链接。 IE中的问题出现在iframe和其他不寻常的元素上，此时它的渲染引擎似乎失败了。 （Shock！）你会得到这个闪烁的原因没有明显的原因，除了可能在iframe和页面中的冲突doctypes，我也会尽量避免。

假设这个链接是由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; 
}

来源

2012-01-28 01:58:04 lpd

这段代码和我的一样，但它对我不起作用。显然，元素b由于某种原因不能保留悬停状态。至少对我来说...... – GTCrais 2012-01-28 02:16:58

必须有其他的东西干扰网页，你能把我们链接到演示网站吗？ – lpd 2012-01-28 02:20:24

我可以，我会编辑我的第一篇文章，并在一会儿发布链接。 – GTCrais 2012-01-28 02:33:35

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

来源

2012-01-28 03:02:01 Philip

z-index和Internet Explorer 9

回答

相关问题