Internet Explorer喜歡按鈕瘋狂

我有一個頁面的圖像。將鼠標懸停在圖像上方時，會在其上方顯示一個稍微透明的白色div，並帶有一些操作按鈕和一些信息。當您將鼠標移離圖像時，信息/按鈕框消失（顯示：無）。Internet Explorer喜歡按鈕瘋狂

在那個隱藏的/鼠標懸停框是一個像Facebook一樣的按鈕。它在所有其他瀏覽器中都顯示得非常好，但正如您可能已經猜到的那樣，它在臭名昭着的IE瀏覽器中具有奇怪的行爲。在IE7-IE8中，類似按鈕只出現一秒鐘，然後消失。它仍然在設計中留下一個空間，就像它在那裏的時候一樣，它不是。如果我首先滾動或不滾動。按鈕出現一秒鐘，然後消失。然而，在IE9中，按鈕確實出現並停留在那裏。當我第二次翻轉時，即使第一次翻轉讓我獲得透明背景，iframe也會獲得白色背景。隱藏鼠標懸停的div

的html代碼：

<div id="hoverPopup"> 
    <div class="fbLikeWrapper"> 
     <div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false"></div> 
    </div> 
    <a href="javascript:reserveGift(#qry_kadoogle_detail.id_kadoogle_detail#, 1)"> 
     <div class="btn_small_prefix"></div> 
     <div class="btn_gift_center">button1</div> 
     <div class="btn_small_suffix"></div> 
    </a> 
    <a href="##"> 
     <div class="btn_small_prefix"></div> 
     <div class="btn_gift_center">button2</div> 
     <div class="btn_small_suffix"></div> 
    </a> 
</div>

CSS代碼：

.fbLikeWrapper 
{ 
    /*width  : 50px; 
    margin-left : auto; 
    margin-right: auto;*/ 
} 
.fbLikeWrapper div 
{ 
    display : block; 
    line-height: normal; 
}

屏幕捕捉：

IE9

enter image description here

IE7

enter image description here

來源

2012-04-13 dreagan

沒有足夠的。你會張貼情況嗎？ – 2012-04-20 17:15:46

介意發佈指向完整工作頁面的鏈接？你會幫助解決我們所有人，從而幫助你更快的方式:)或者只是添加所有頁面的代碼。它只是缺少一些重要信息。 – 2012-04-25 22:41:31

僱主不會允許我放任何東西，所以這是一個不行。而且我看不到這些代碼將會丟失。你不會mousover/-out js-code ..？：-s – dreagan 2012-04-26 06:20:58

我通過我的一位同事發現了類似問題的答案。

當頁面被加載時，彈出窗口需要被隱藏，所以我給了他們一個表示display:none;的類。當我懸停時，我打開和關閉課程。在每個使用Facebook按鈕的瀏覽器中，IE都不會。

我不完全知道爲什麼，但我確實發現，如果我使用jquery .hide()和.show()函數切換並初始設置隱藏div並且不使用類，它就像魅力一樣。案件關閉。 IE繼續吸吮。

來源

2012-05-03 12:11:24 dreagan

+1我最近遇到這個問題 - 感謝解決方案。 IE對iframe加載Like按鈕時會產生奇怪的影響，因爲它會使其高度爲零。我會認爲這是一種反click measure措施。 – steveax 2012-05-18 07:04:51

試試這個：

#hoverPopup .fb-like { 
    width: 47px; 
} 

.fbLikeWrapper 
{ 
    display  : inline-block; 
    width  : 51px; 
    text-align : center !important; 
    margin  : 30px auto 10px; 
    box-sizing : border-box; 
    -moz-box-sizing  : border-box; 
    -webkit-box-sizing : border-box; 
    overflow : hidden; 
}

如果沒有幫助，可能的JavaScript造成的問題，而不是CSS，你必須分享更多的信息（JavaScript的， html等）...

來源

2012-04-26 21:15:36 Roki

沒有工作，它不是與css相關 – dreagan 2012-05-03 12:03:03

Internet Explorer喜歡按鈕瘋狂

回答

相關問題