2010-08-26 3 views
0

У меня возникает очень странная проблема непрозрачности/зависания в IE. Все работает в FF и Chrome.IE непрозрачность: иногда наведите указатель мыши?

Рассмотрим эту страницу:

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#outer").css("opacity", .7); 
     }); 
    </script> 
    <style type="text/css"> 
     #outer 
     { 
      position: absolute; 
      width:600px; 
      background: #111; 
      z-index:2; 
      overflow: hidden; 
     } 
     #outer div 
     { 
      float: left; 
     } 
     ul 
     { 
      list-style: none; 
      margin: 0; 
      padding: 0; 
     } 
     ul li 
     { 
      width: auto; 
      margin: 2px 4px 2px 4px; 
      padding: 2px 4px 2px 4px; 
      font-size: 11px; 
      color: White; 
     } 
     ul li:hover 
     { 
      background: red; 
      font-weight: 600; 
      cursor: pointer; 
     } 
    </style> 
</head> 
<body> 
    <div id="outer"> 
     <div id="one"> 
      <ul> 
       <li>111</li> 
       <li>222</li> 
      </ul> 
     </div> 
     <div id="two"> 
      <ul> 
       <li>333</li> 
       <li>444</li> 
      </ul> 
     </div> 
     <div id="three"> 
      <ul> 
       <li>555</li> 
       <li>666</li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html> 

Вот проблема. Переключение мыши является прерывистым - вы можете увидеть или не увидеть красный фон и изменение шрифта в IE (7 или 8). Вы всегда увидите изменение курсора. Если я беру фон и вес шрифта, я все еще вижу изменение курсора. Но если есть фон или вес шрифта, курсор по-прежнему будет меняться, но фон или шрифт могут быть или не быть.

Если непрозрачность НЕ установлена ​​на #outer, все работает повсюду. Опять же, FF и Chrome в порядке.

Как вы думаете?

ОБНОВЛЕНИЕ: Эта сфера должна быть ограничена IE8. Когда IE8 находится в режиме совместимости (действуя как IE7), все хорошо!

Но, в том числе и этот тег в заголовке:

<meta id="metaIE8IE7" http-equiv="X-UA-Compatible" content="IE=7" /> 

не исправить.

+0

Старые версии IE (не помню, какая именно версия) не поддерживает ': hover' на чем-либо, кроме якоря, хотя для этого его, вероятно, является« фильтром », который jQuery использует для коаксиального IE для создания чего-то похожего 'opacity'. Насколько мне известно, «фильтр» оставлен вуду с давних времен ... –

+0

: зависает - курсор действительно меняется. Призрачная часть заключается в том, что это значительно упрощенная версия моей проблемы - у меня есть регионы на «реальной» странице, где: зависание работает во всех отношениях. Я надеялся, что решение этого перейдет. – n8wrl

+0

@Yi Jiang: фильтр все еще используется в IE8 для создания непрозрачности. Но я согласен с вами в том, что они являются MS IE voodoo. –

ответ

2

был такой же проблема и нашел решение (хотя мое решение было для: парить не является литий: парить и я не проверял)

В основном, убедитесь, что элемент «имеет макет». Например, display: block и т. Д. Затем сбросьте прозрачность для этого элемента. -ms-filter: "";

-2

Подробнее CSS-груз-культ для меня! Я понятия не имею, но проблема с IE8 в IE7 исправила проблему. Я ошибался в этом, не работая в вопросе. Все еще хорошо в других браузерах.

1

только что получил идеальную рабочую комбинацию:

display: block; 
zoom: 1; 
opacity:0.4; /*for ie9 and other browsers */ 
filter: alpha(opacity=40); /*for ie older browsers*/ 

Как Боб Сайед в «имеет макетом» имеет важное значение для того, чтобы работать в т 8. Здесь «дисплей: блок;» делает работу.

Смежные вопросы