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

回答

相關問題