2011-07-08 34 views
12

Tôi có một menu thả xuống CSS đơn giản với khung nội tuyến bên trong nó. Khi tôi di chuột qua menu thả xuống, trình đơn thả xuống. Nhưng khi con chuột của tôi di chuyển khung nội tuyến bên trong trình đơn, menu sẽ quay trở lại. Dưới đây là một phiên bản đơn giản của mã của tôi:: di chuột không hoạt động bình thường trong IE9

<div id="comments"> 
    <a href="#" class="btn">View comments</a> 
    <div id="comment-wrap"> 
    <iframe src="http://www.facebook.com/plugins/comments.php?..."></iframe> 
    </div> 
</div> 

<style type="text/css"> 
#comment-wrap{display:none;z-index:5;position:absolute;padding:10px;background-color:#fff;} 
#comments:hover #comment-wrap{display:block;} 
</style> 

Tính năng này hoạt động trong các phiên bản mới nhất của FF, Chrome và Opera.

P.S. Menu thả xuống vẫn được thả xuống khi con chuột của tôi đang di chuột qua phần đệm của # comment-wrap.

+0

Loại tài liệu nào bạn sử dụng cho điều đó? –

Trả lời

1

Thật không may, đây có vẻ là lỗi trình duyệt, quay lại nhiều phiên bản IE. Bạn có thể sử dụng giải pháp JS làm bản sao lưu cho IE. Tôi đã tạo một mã số jsFiddle example, thích ứng từ another solution giải quyết vấn đề này.

Hy vọng điều đó sẽ hữu ích!

Chỉnh sửa: kiểm tra thêm trong IE9 cho thấy rằng mặc dù khung nội tuyến được hiển thị, di chuột qua thanh cuộn sẽ ẩn nó ngay lập tức. Có khả năng một bản sửa lỗi JS liên quan nhiều hơn cho việc này, nhưng tùy thuộc vào bạn nếu bạn muốn thực hiện nó.

17

Tôi đã gặp phải các sự cố tương tự khi làm việc với: lớp psuedo di chuột. Nó bắt đầu hoạt động tốt khi tôi thay đổi chế độ Tài liệu của trình duyệt thành IE 9 và chế độ Trình duyệt cũng được đặt thành IE9. IE 9 có chế độ tài liệu được đặt thành IE8 theo mặc định.

Ngoài ra, bạn có thể thêm các thông tin meta sau trong thẻ head:

<meta http-equiv="X-UA-Compatible" content="IE=9"/> 

Hope this helps.

+0

Xin chào Vilas, bạn có thể giải thích/cách đặt chế độ tài liệu/trình duyệt không? Tôi cho rằng chế độ tài liệu là cài đặt mà tác giả trang đặt ở vị trí nào đó trong đánh dấu, nhưng chế độ trình duyệt là cài đặt mà người dùng sở hữu? –

+0

Yup Tôi cũng đang đề cập đến chế độ Trình duyệt, bạn có thể thêm thông tin meta sau vào thẻ head

+0

wow thẻ meta đó như thế nào công việc? nó cố định hoàn toàn vấn đề của tôi! – christopher

0

Gần đây tôi đã gặp phải sự cố di chuột trong IE10 (không chắc chắn về các phiên bản thấp hơn) đã khiến tôi phát điên. Tôi đã thiết lập css di chuột của tôi đúng và nó đã được cho một div có chứa một khung nội tuyến. Vấn đề là khi bạn di chuột qua div nó sẽ hiển thị khung nội tuyến nhưng ngay sau khi bạn cố di chuyển chuột vào iframe, nó sẽ biến mất một lần nữa. Tôi đã tìm kiếm ở khắp mọi nơi và không tìm thấy câu trả lời nào có thể chấp nhận được cho tôi ngoại trừ sử dụng javascript hoặc jquery. Sau nhiều ngày cố gắng phân loại nó, tôi đã tìm ra một giải pháp rất đơn giản có hiệu quả với tôi. Tôi chỉ cần xóa khung nội tuyến khỏi div và sử dụng đối tượng như

<div class='showme'>links<div style='float:left;' class='showme_1'> 
    <object type='text/html' data='http://www.google.com' style='width:100%; height:100%' border='0'> 
    </object> 
</div> 

Tôi hy vọng điều này sẽ giúp mọi người tiết kiệm rất nhiều thời gian nghiên cứu.

4

Tôi thấy có cùng một vấn đề và tôi biết điều này đã là một bài đăng cũ nhưng tôi cảm thấy như tôi đã phải xuất bản giải pháp của mình. IE cơ bản không chấp nhận sự kiện :hover cho bất kỳ thẻ nào khác ngoài <a> với chỉ định href (không hoạt động trên các phiên bản tức là sớm), trừ khi bạn thêm <!DOCTYPE HTML> ở trên cùng. Và đó là nó! Đã giải quyết vấn đề :).

+4

Chỉ cần tình yêu khi tôi nhận được phiếu bầu mà không có bất kỳ lời giải thích nào: P. Dễ bỏ phiếu, khó biện minh? Nó sẽ giúp tôi và bất cứ ai đến SO và tìm kiếm một câu trả lời cho câu hỏi này, để biết tại sao phiếu bầu (lên hoặc xuống) được đưa ra. Tôi đã chia sẻ kinh nghiệm của mình để trợ giúp và thêm một tùy chọn khác. Thường thì tôi thấy rằng câu trả lời được bình chọn nhiều nhất không phải là câu trả lời phù hợp với tôi. Không phải là một vấn đề cá nhân, chỉ cố gắng xây dựng. –

Các vấn đề liên quan