IE 8 div и css курсор - PullRequest
Новая
       24

IE 8 div и css курсор

5 голосов
/ 04 октября 2009

В приведенном ниже примере при наведении на иконки курсор должен быть изменен на другой. Он работает, кроме IE 8. В IE 8 эти значки оказались недоступными, то есть не только курсор не изменился, но и событие нажатия Jquery не сработало. Рассмотрим, как работает следующий HTML-код в FF, IE7 и, в конечном итоге, в 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>

Какая проблема может быть причиной проблемы? Какие могут быть возможные обходные пути?
Заранее спасибо.

P.S. Изменение DOCTYPE на самом деле невозможно.
Кроме того, если я удаляю float: left в этом примере, это выглядит как «исправлено», но когда я удаляю его на веб-сайте, кроме поврежденного дизайна, это также не помогает.

Ответы [ 5 ]

3 голосов
/ 04 октября 2009

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>
1 голос
/ 16 августа 2013

Это просто сработало для меня в IE8, супер просто 

cursor: pointer !important;
1 голос
/ 10 марта 2012

Извлеките float:left, и класс css выглядит следующим образом. 

.icon-button { cursor: pointer; }

Это должно работать.

1 голос
/ 09 декабря 2009

Как насчет: 

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

Я использую его сам, и он отлично работает.

1 голос
/ 04 октября 2009

Я не знаю, как взломать его. Но, если можно щелкнуть что-нибудь, он должен быть в теге a, поэтому вставьте a и, возможно, display:block. href может быть =#. Мне кажется, что это решение семантическое и хорошее для меня :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...