Internet Explorer Thích nút điên cuồng

Question

Tôi có một trang có hình ảnh. Khi bạn di chuột qua hình ảnh, một div màu trắng hơi trong suốt xuất hiện trên đầu trang của nó với một vài nút hành động và một số thông tin. Khi bạn di chuyển chuột ra khỏi hình ảnh, hộp thông tin/nút biến mất (hiển thị: không có).

Trong hộp ẩn/di chuột qua đó là nút like facebook. Nó hiển thị hoàn toàn tốt trong tất cả các trình duyệt khác, nhưng Như bạn có thể đoán, nó có hành vi lạ trong các trình duyệt IE khét tiếng. Trong IE7 - IE8, nút tương tự xuất hiện chỉ trong một giây và sau đó biến mất. Nó vẫn để lại một không gian trong thiết kế như khi nó ở đó, nó chỉ là không. Không có vấn đề gì nếu tôi rollover đầu tiên hay không. Nút xuất hiện trong một giây, sau đó biến mất. Tuy nhiên, trong IE9, nút này xuất hiện và vẫn ở đó. Tuy nhiên, khi tôi di chuột qua lần thứ hai, khung nội tuyến sẽ có nền trắng, mặc dù rollover đầu tiên cho tôi một nền trong suốt. đang

html của ẩn mouseover div: Mã

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

ảnh chụp màn hình:

IE9

IE7

Answer 1

Tôi đã tìm thấy câu trả lời thông qua một trong những đồng nghiệp của tôi, những người đã có vấn đề tương tự.

Khi trang được tải, cửa sổ bật lên cần được ẩn, vì vậy tôi đã cung cấp cho họ một lớp cho biết display:none;. Khi tôi di chuột, tôi bật và tắt lớp. Trong mọi trình duyệt hoạt động với nút như facebook, với IE thì không.

Tôi chưa biết lý do tại sao, nhưng tôi đã tìm ra rằng nếu tôi sử dụng các hàm jquery .hide() và .show() để chuyển đổi và ban đầu đặt div ẩn và không sử dụng lớp, nó hoạt động như một nét duyên dáng. Trường hợp đã đóng. IE tiếp tục hút.

Answer 2

Hãy thử điều này:

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

Nếu đây không giúp, có thể javascript gây ra vấn đề, không phải là css và bạn phải chia sẻ thêm thông tin (javascript, html, v.v.) ...