Geek Answers Handbook

IE 8 div and css cursor

In the example below, when you hover over the icons, the cursor must be changed to another. It works, except for IE 8. In IE 8, these icons turned out to be unattractive, that is, not only the cursor does not change, but the Jquery click event does not fire. Consider how the following HTML works in FF, IE7, and ultimately in IE8:

<!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>

Which migration is the root of the problem? What could be possible?
Thanks in advance.

PS Changing DOCTYPE is actually impossible.
Also, if I delete the float: in this example it seems “fixed”, but when I delete it on the website, apart from the broken design, it also does not help.

+5
5

IE8 div s. <img/> div .

: http://jsbin.com/asiju ( http://jsbin.com/asiju/edit)

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>
+3

, . , smth , a, a , , display:block. href =#. :)

+1

:

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

, .

+1

float:left, css .

.icon-button { cursor: pointer; }

.

+1

IE8,

cursor: pointer !important;
+1

More articles:


All Articles