css样式弹出层在不同浏览器下显示位置不同
我做了一个css弹出层显示大图和详细信息，在ie6，搜狗浏览器下显示是正常的：

但是在其它浏览器就变成下面这样：


代码如下：
        <style type="text/css"> 
    /*Tooltips*/ 
    .tooltips{ position:relative; /*这个是关键*/ z-index:2; } 
    .tooltips:hover{ z-index:3; background:none; /*没有这个在IE中不可用*/ } 
    .tooltips span{ display: none; } 
    .tooltips:hover span{ 
    /*span 标签仅在 :hover 状态时显示*/
    display:block; 
    position:absolute; 
    top:2px; 
    left:1px; 
    width:220px; 
    border:1px solid black;
    background-color:#FFFFFF; 
    padding: 3px; 
    color:black;
    }
    </style>
    
<asp:DataList ID="DataList1" runat="server" RepeatColumns="9" RepeatDirection="Horizontal" CellSpacing="9">
   <ItemTemplate>
     <a class="tooltips" href="#tooltips">
        <img src="images/<%#Eval("product_img") %>" width="100px" height="100px" style="border: 0" alt="" />
      <span>
        <table>
          <tr>
            <td>
              <img src="images/<%#Eval("product_img") %>" style="border: 0" width="212px" height="212px" alt="" />
            </td>
          </tr>
          <tr>
            <td>
              <a href="aaa.aspx?productid=<%# Eval("Product_id") %>&&str=首页" target="_blank" style="text-decoration: none; font-size: 13px; color: #0063DC;">
                  <%#Eval("product_name") %>