我使用表来显示我动态生成的数据取决于用户输入html结构如下所示:
<table>
<tr>
<td>.....</td>
<td>.....</td>
<td style="position:relative;"> //like this i set for all td in table
<div style="position:absolute">//like this i set for all div in table
<contents>
</div>
</td>
<td>.....</td>
<td>.....</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
这里的div是到了body的顶角.所有这些上面的样式都应用于javascript和它在chrome,IE中的工作正常,但不在FF中,如下图所示.

如果我们将div的位置更改为绝对到相对它将正确对齐,但我做一个悬停效果,而用户悬停div的位置是重要的,这个问题只发生在firefox
为了您的快速参考,请查看jquery http://www.malsup.com/jquery/hoverpulse/
我需要这样必须在FIREFOX表中实现,这意味着
每个图像放在一个td内//<td style="position:relative;">
如果用户将鼠标悬停在td上,则图像应该脉冲(缩放效果).
表格结构已在上面给出.
我不明白为什么FF和Chrome以不同的方式呈现我的页面.这是一个它的屏幕
firefox:firefox示例http://grab.by/65Bn
这是Chrome中的一个
chrome:chrome示例http://grab.by/65BB
fieldset具有相对位置,图像具有绝对位置.
这是基本结构:
<fieldset class="passenger-info">
<legend>Passenger 1</legend>
<div class="remove-me">
<img src="/images/delete-icon-sm.png" />
</div>
</fieldset>
Run Code Online (Sandbox Code Playgroud)
基本上图像是在图例之后声明的.
这是fieldset的css:
.passenger-info {
background:none repeat scroll 0 0 #F2F2F2;
border:1px solid #9D240F;
display:inline;
float:left;
margin-bottom:10px;
margin-right:10px;
padding:3px 10px;
position:relative;
width:350px;
}
Run Code Online (Sandbox Code Playgroud)
并为我删除图像:
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
Run Code Online (Sandbox Code Playgroud)
这很奇怪.我尝试将字段集填充,并且图像向上移动了一点,但仍然没有在角落.
这篇文章表明FF确实在渲染场集方面存在问题.
http://www.codingforums.com/showthread.php?t=132624
有没有更好的方法来修复而不使用浏览器特定的黑客攻击?