2010-08-26 73 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都很好。

您認爲如何?

更新:本seme限於IE8。當IE8處於兼容模式(像IE7一樣)時,一切都很好!

但是,包括頭部本文標籤:

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

不能解決問題。

+0

老版本的IE(不記得哪個確切的版本)不支持':hover'而不是錨,除了這個,它可能是jQuery用來哄騙IE生成類似'opacity'。就我而言,'過濾器'是從古代剩餘的巫術... – 2010-08-26 15:27:10

+0

:懸停工作 - 光標確實改變。令人毛骨悚然的部分是,這是我的問題的一個非常簡單的版本 - 我確實在'真實'頁面上有一些區域,其中:懸停在所有方面都起作用。我希望能解決這個問題。 – n8wrl 2010-08-26 16:18:21

+0

@Yi Jiang:IE8中仍在使用過濾器來產生不透明度。但我同意你,他們是MS IE巫術。 – 2010-08-26 17:33:02

回答

2

有同樣的問題,並找到了解決方案(雖然我的解決方案是爲一個:懸停不是李:hover和我沒有測試)

基本上,確保元素「有佈局」。例如,顯示:塊等,然後重置該元素的透明度。 -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*/ 

正如鮑勃·賽義德的「有佈局」是必不可少的它在IE 8中。這裏的工作「顯示:塊;」做這項工作。