Question

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") %>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" style="text-decoration: none; font-size: 14px; color: #FF6600; font-weight: bold">￥<%#Eval("product_price") %></a>
</td>
</tr>
</table>
</span></a>
</ItemTemplate>
</asp:DataList>
要怎么改才能让弹出的层在任何浏览器下都和第一张图片一样显示？





Answer 1

在tooltip样式中加入 display；block属性！显示正常！.tooltip{display:block;position:relative; /*这个是关键*/ z-index:2; }

css代码如下
<style type="text/css">
/*Tooltips*/
.tooltips{ display:block;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>
希望能帮到您，谢谢！

追问

我加上之后真的可以了，谢谢你，还有个问题，你帮忙看看能不能改过来

这个总共有三行，第一行弹出的层位置是正好的，现在我鼠标滑过第二行的图片时，是下面这个效果

能不能改成 就是不管是鼠标滑过第二行或是第三行的图片，弹出的层的位置就像是第一张图片的位置一样，就是把下面这个图片弹出的这个层往上提，提到第一张图片那个位置，这个能改吗？

追答

理论上是 可以的，但是我不清楚你的具体代码，而且你说的那个下面的效果，其实就是这个样子的，小图点上去是大图，干嘛要把第2行的大图也放到第一行去？不合理的！

追问

不是，我就是想实现这个效果，你看看这个网站http://www.lao88.cn/ 我想实现的就是它那种效果，位置就是有三行产品那个地方。

追答

可以的，不过你的代码不是这么写了，可以右键查看他网页的源代码，你研究一下怎么写，反正不是你现在 的这种写法！

就是说：要放大图片你得单独写出来，不能包含在你的template标签中，比如一张大图用一个div写，如果有6张就写6个div，然后你最外层大框架，比如div，把它谁相对定位，然后6个div大图设为绝对定位，然后一个个的调整偏移的距离。