Con trỏ 8 và con trỏ css IE 8 div và css

Ví dụ dưới đây khi bạn di chuột lên biểu tượng con trỏ nên được thay đổi thành khác nhau. Nó hoạt động ngoại trừ IE 8. Trên IE 8, các biểu tượng này được chuyển thành không thể xóa được, tức là không chỉ con trỏ không bị thay đổi, mà cả sự kiện bấm Jquery không kích hoạt. Hãy xem xét mã html sau hoạt động như thế nào tại FF, IE7 và cuối cùng tại IE8:Con trỏ 8 và con trỏ css IE 8 div và css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>CSS IE 8 cursor test</title> 
    <style type="text/css" media="screen"> 
     .icon-button { 
      float: left; 
      cursor: pointer; 
     } 
     .ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); } 
</style> 
</head> 
<body> 
    <div class="icon-button ui-icon"></div> 
    <div>Sample Text</div> 
</body> 
</html>

Di cư là gốc rễ của vấn đề? Điều gì có thể là workarrounds?
Cảm ơn bạn trước.

P.S. Việc thay đổi DOCTYPE không thực sự khả thi.
Ngoài ra nếu tôi xóa float: bên trái trên ví dụ này có vẻ như "cố định", nhưng khi tôi xóa nó trên một trang web, ngoài thiết kế bị hỏng, nó cũng không giúp ích gì.

Nguồn

2009-10-04 Andriy Tkach

này hoạt động quá: 'con trỏ: con trỏ quan trọng;' cho ie8 –

IE8 không thích trống div s. Đặt một ô trống <img/> với một điểm ảnh trong suốt bên trong div dường như sửa nó.

Demo: http://jsbin.com/asiju (Editable qua http://jsbin.com/asiju/edit)

nguồn HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>CSS IE 8 cursor test</title> 
    <style type="text/css" media="screen"> 
     .icon-button { float: left; cursor: pointer; } 
     .ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); } 
     .dummy-image { width: 15px; height: 10px; vertical-align: top; border: none; } 
    </style> 
    </head> 
    <body> 
    <div class="icon-button ui-icon"><img class="dummy-image" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw=="/></div> 
    <div>Sample Text</div> 
    </body> 
</html>

Nguồn

2009-10-04 11:53:10 brianpeiris

Tuyệt vời! Tôi đã áp dụng nó, có vẻ là cố định. Nhưng bạn có nhận thấy rằng biên giới của IMG thực sự không biến mất trên IE8? –

Bạn nói đúng. Tôi đã chỉnh sửa câu trả lời của mình để bao gồm pixel trong suốt 1x1 trong thẻ hình ảnh. Điều đó thoát khỏi biên giới: http://jsbin.com/asiju – brianpeiris

ugh, những gì một khó chịu hack. không tràn: tự động làm thủ thuật? –

Tôi không biết bất kỳ hack nào để đánh bại nó. Tuy nhiên, nếu có thể nhấp vào smth, thẻ phải nằm trong thẻ a, vì vậy hãy chèn a và có thể display:block. href có thể là =#. Giải pháp đó có vẻ là ngữ nghĩa và tốt cho tôi :)

Nguồn

2009-10-04 11:30:38 IProblemFactory

Cảm ơn bạn, nhưng nope, tôi đã chỉ cố gắng để thay thế div để a trong ví dụ của tôi: - nó không giúp được ... –

Ý tôi là, chèn 'a' vào' div', con trỏ 'a' mặc định là con trỏ :) – IProblemFactory

Tôi đồng ý với Rinz. Tốt nhất nên sử dụng liên kết có hình ảnh (''), giống như Stack Overflow, hoặc ít nhất sử dụng nút ('') với hình nền. Đó là ngữ nghĩa hơn. – brianpeiris

Làm thế nào về:

<a href="whatever.php"> 
<div class="BG IMAGE" style="cursor:The one you want"></div> 
</a>

tôi sử dụng nó bản thân mình và nó hoạt động tốt.

Nguồn

2009-12-09 15:41:49 Nothing

bạn không thể đặt một div bên trong một –

yep. Đồng ý với một timhessel - đó là ngữ nghĩa xấu. –

Lấy ra float:left và lớp css trông giống như dưới đây.

.icon-button { cursor: pointer; }

Nó sẽ hoạt động.

Nguồn

2012-03-10 07:48:15 Sridhar

này chỉ làm việc cho tôi trong IE8, siêu đơn giản

cursor: pointer !important;

Nguồn

2013-08-15 20:48:15

Điều này làm việc hoàn hảo cho tôi. Cảm ơn! – Khagan

Con trỏ 8 và con trỏ css IE 8 div và css

Trả lời

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