IE không tôn trọng: di chuột vào yếu tố

Question

làm việc trên trang web sau đây: http://cetcolor.com

Các đồ họa masthead với "Đọc About It" nút có một liên kết định vị với hover rằng khi cán qua hiển thị một nút màu cam đồ họa và là một liên kết có thể nhấp.

Tuy nhiên, trong trình duyệt IE, nó không hoạt động.

Dưới đây là HTML bị ảnh hưởng:

<div id="header"> 
    <a href="/" title="CET Color"><img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"></a> 
    <span class="strapline">Affordable Large-format UV Printing Solutions</span> 
    <a href="/pressroom_article8" class="read_about_it"></a>  
</div> 

Và đây là CSS tham chiếu:

#header .read_about_it { 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 
#header .read_about_it:hover { 
    background-image: url(/images/masthead_index_read_about_i.jpg); 
    background-repeat: no-repeat; 
    cursor: pointer; 
    z-index: 101; 
} 

Có ai có bất kỳ ý tưởng tại sao di chuột không hoạt động trong các trình duyệt IE?

Answer 1

Tôi có giải pháp cho bạn. Chỉ cần xác định màu nền hoặc hình nền cho lớp read_about_it của bạn.

Có lỗi logic rõ ràng trong mã CSS của bạn/hoặc trong IE - phụ thuộc vào quan điểm. Thẻ A của bạn trống - Tôi không có nghĩa là văn bản nhưng nền (bạn thay đổi nền trên trạng thái di chuột của bạn). Tất cả chúng ta đều biết rằng IE sống trong thế giới riêng của mình và xử lý HTML theo nhiều cách khác nhau khiến nó sử dụng công cụ Trident cổ xưa. Tuy nhiên IE sẽ không thay đổi nền trên trạng thái di chuột nếu phần tử trống (không có nền) vì IE giả định rằng không cần thay đổi hoặc tạo ra thứ gì đó chưa tồn tại.
Chúc mừng!

Answer 2

Nếu bạn đang sử dụng IE6 nó không hỗ trợ: hover trên bất kỳ yếu tố ngoại trừ

<a> 

tôi đã nhận được xung quanh nó bằng cách sử dụng javascript

onmouseover 
onmouseout 

sự kiện.

Answer 3

Thêm "display: block;" với nó, và nó sẽ làm việc cho bạn.

#header .read_about_it { 
    display: block; 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 

Answer 4

Tôi đã có cùng một vấn đề và tôi đã giải quyết vấn đề này với:

#header .read_about_it { 
    display: block; 
    background: rgba(255, 255, 255, 0); 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 

Các "nền: rgba (255, 255, 255, 0)" là một từ khóa để giải quyết vấn đề này. Nhưng bạn muốn IE-7 hoặc cũ hơn, bạn có thể đặt background-image: url (URL_TO_TRANSPARENT_IMAGE).