2012-11-13 63 views
2

我只在IE中有我的Z索引問題。當我從數據庫加載數據時,使用可以滾動標識,並且CSS彈出框將顯示描述。它適用於所有瀏覽器,但IE。彈出框z-index似乎沒有被調用。它將呈現在當前標識之前繪製的徽標之上,但會顯示在之後繪製的徽標下。只有動態數據的IE中的Z索引問題

查閱http://tempcfo.com/testimonials.php

這裏是我的代碼

CSS ...

.thumbnail{ 
position: relative; 
} 

.thumbnail:hover{ 
text-decoration:none; 

} 

.thumbnail span{ /*CSS for enlarged image*/ 
position: absolute; 
background:#E2E2E2; 
background-repeat:no-repeat; 
padding: 0px; 
visibility: hidden; 
color: black; 
text-decoration: none; 
width:265px; 
height:195px; 
} 

.thumbnail span img{ /*CSS for enlarged image*/ 
border-width: 0; 
padding:0px; 
float:left; 
z-index:0; 
} 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 
visibility: visible; 
top: -77px; 
padding:10px; 
left:135px; /*position where enlarged image should offset horizontally */ 
float:left; 
text-decoration:none; 
z-index:500; 
} 

.thumbnail2{ 
position: relative; 

} 

.thumbnail2:hover{ 
text-decoration:none; 

} 

.thumbnail2 span{ /*CSS for enlarged image*/ 
position: absolute; 
background:#E2E2E2; 
background-repeat:no-repeat; 
padding: 0px; 
visibility: hidden; 
color: black; 
text-decoration: none; 
width:265px; 
height:195px; 
} 

.thumbnail2 span img{ /*CSS for enlarged image*/ 
border-width: 0; 
padding:0px; 
float:right; 
z-index:0; 
} 


.thumbnail2:hover span{ /*CSS for enlarged image on hover*/ 
visibility: visible; 
top: -77px; 
padding:10px; 
right:138px; /*position where enlarged image should offset horizontally */ 
float:right; 
text-decoration:none; 
z-index:500; 

}

HTML ...

<div id="logos" > 
     <table cellspacing="5" > 
      <tr> 

      <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140"> 




      <a class="thumbnail" href="#success_page" style="border:none; outline:none; cursor:default;"> 
      <img src="images/logo/20120830005810.png"width="85%" border="0" /> 


      <span> 
      <table> 
       <tr> 
        <td class="popup_title"> 
        </td> 
       </tr> 
       <tr> 
        <td class="short_desc"> 
        「I hired tempCFO on a contracting basis to be the first CFO of my start-up company. They performed their role extremely well, building up our chart of accounts, developing a sophisticated financial model, creating powerful board presentations and overseeing the accounting function. 
-Tom Mohr, Digital Air Strike     </td> 
       </tr> 
       <tr> 
        <td class="quotee"> 
        Tom Mohr - Digital Air Strike      </td> 
       </tr> 
      </table> 
      </span> 

    </a> 




    <table width="138" > 


       </table> 
      </td> 

      <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140"> 




      <a class="thumbnail" href="#success_page" style="border:none; outline:none; cursor:default;"> 
      <img src="images/logo/20120830005827.png"width="85%" border="0" /> 


      <span> 
      <table> 
       <tr> 
        <td class="popup_title"> 
        </td> 
       </tr> 
       <tr> 
        <td class="short_desc"> 
        Mitrionics AB is the technology leader in FPGA-based processing for Accelerated Computing, providing greater processing performance and a greener computing alternative, because of lower energy consumption.     </td> 
       </tr> 
       <tr> 
        <td class="quotee"> 
             </td> 
       </tr> 
      </table> 
      </span> 

    </a> 




    <table width="138" > 


       </table> 
      </td> 

      <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140"> 





      <a class="thumbnail2" href="#success_page" style="border:none;outline:none; cursor:default;"> 

      <img src="images/logo/20120830005843.png"width="85%" border="0" /> 

      <span> 
      <table> 
       <tr> 
        <td class="popup_title"> 
        </td> 
       </tr> 
       <tr> 
        <td class="short_desc"> 
        RelayHealth provides connectivity solutions that make it easy for consumers and healthcare organizations to securely exchange information.     </td> 
       </tr> 
       <tr> 
        <td class="quotee"> 
             </td> 
       </tr> 
      </table> 
      </span> 

    </a> 






    <table width="138" > 


       </table> 
      </td> 

      <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140"> 





      <a class="thumbnail2" href="#success_page" style="border:none;outline:none; cursor:default;"> 

      <img src="images/logo/20120830005855.png"width="85%" border="0" /> 

      <span> 
      <table> 
       <tr> 
        <td class="popup_title"> 
        </td> 
       </tr> 
       <tr> 
        <td class="short_desc"> 
        Propero Solutions offers world-class expertise in agile software development, Scrum methodology, agile project management, extreme programming (XP), lean and kanban development methods.     </td> 
       </tr> 
       <tr> 
        <td class="quotee"> 
             </td> 
       </tr> 
      </table> 
      </span> 

    </a> 






    <table width="138" > 


       </table> 
      </td> 
         </tr> 
       <tr>   
      <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140"> 




      <a class="thumbnail" href="#success_page" style="border:none; outline:none; cursor:default;"> 
      <img src="images/logo/20120830005906.png"width="85%" border="0" /> 


      <span> 
      <table> 
       <tr> 
        <td class="popup_title"> 
        </td> 
       </tr> 
       <tr> 
        <td class="short_desc"> 
        Glam Media is the pioneer and global leader of Vertical Media—a revolutionary new media model that combines our flagship properties with curated publisher sites and their passionate, engaged audiences.     </td> 
       </tr> 
       <tr> 
        <td class="quotee"> 
             </td> 
       </tr> 
      </table> 
      </span> 



    </a> 

...... 

感謝您的任何幫幫我。

+0

似乎是一個CSS問題,所以不要給我們PHP代碼。給我們創建的HTML代碼(查看 - >來源) – Andy

+0

對不起,我編輯它。 – vinylDeveloper

回答

0

我想通了。該頁面是舊的,由別人寫的。他們使用這個

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

一次我升級到

<!DOCTYPE html> 

的z-index開始正常工作。這麼簡單,浪費了很多小時。

0

我很確定這與IE處理z-index的方式有關。在Internet Explorer中定位的元素會生成一個新的堆棧上下文,從z-index值爲0開始。因此,z-index無法正常工作 - 爲父元素提供更高的z-index通常會修復該錯誤。

我打算看看能不能給你一個如何改變你的代碼的例子,但看起來你正在對你提供的例子URL進行修改。