在一个相对的容器问题内的绝对的Firefox位置 [英] firefox position absolute inside a relative container issue

问题描述

  
 
使用表格显示我的动态生成的数据取决于用户输入html结构如下所示： <表> 
< tr> 
< td> .....< / td> 
< td> .....< / td> 
< td style =position：relative;> //像这样我为表中的所有td设置
< div style =position：absolute> //像这样我为表格中的所有div设置
< contents> 
< / div> 
< / td> 
< td> .....< / td> 
< td> .....< / td> 
< / tr> 
< / table> 
  

这里的div是去body.all的顶部角落，所有这些样式都应用th javascript的JavaScript它的工作正常，在IE浏览器，但不是在FF像下面的图像。

如果我们将div的位置更改为absolute，它将会正确对齐，但是我会做一个悬停效果，而用户悬停的div的位置是重要的，这个问题只发生在firefox

为您的快速参考检查jq​​uery http://www.malsup.com/jquery/hoverpulse/

我需要像FIREFOX这样的表格，这意味着
$ b

• 一个td //< td style =position：relative;>

如果th用户将鼠标悬停在图像上应该会产生脉冲（缩放效果）。 当用户将鼠标悬停时，应该转到之前的状态。 （正常大小）

表格结构已在上面给出。

解决方案

表格单元的定位是有问题的。通常的解决方法是单独放置 td 的样式，并在其中放置 div C $ C>位置：相对于。然后将内容放置在该div内。

 < td> <！ - 完全没有风格 - > 
< div style =position：relative;> 
< div style =position：absolute> <！ -  original div  - > 
<内容> 
< / div> 
< / div> 
< / td> 
  

编辑：

我不知道哪些效果你后，但这里是一个jsFiddle展示问题： http://jsfiddle.net/ygP7k/5 /

在每个表格单元格中有一个绝对定位的div表格，这些表格应该对齐到右下角。它可以在除Mozilla以外的所有浏览器中使用。

但是，这里是一个更新的额外divs，正如我所提到的： http://jsfiddle.net/ygP7k/7/

这个工作原理完全一样，除了它也在Firefox 。

你可以用这个吗？这是否回答你的问题？

i am using table for displaying my dynamically generated data depend upon the user input the html structure is looks like below:

<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>

Here the div is goes to top corner of the body.all these above styles are applied throght the javascript and its working fine in chrome,IE,but not in FF like the image below.

if we change the position of the div to absolute to relative it will align correctly but i am make a hover effect while the user hover the div's for that the positions are important and this issue happens only in firefox

for your very quick reference check out the jquery http://www.malsup.com/jquery/hoverpulse/

i need like this have to be implemented inside the table in FIREFOX which means

• Each images placed inside a td//<td style="position:relative;">

• if the user hover on a td the image should pulse(Zooming effect).

• When the user hover out it should goes to the previous state.(normal size)

The table structure is already given above.

解决方案

Positioning of table cells is problematic. The usual solution is to leave the style of the td alone, and put a div in it which you make position:relative. Then place the content inside that div.

<td> <!-- no style at all -->
 <div style="position:relative;">
  <div style="position:absolute"> <!-- original div -->
   <contents>
  </div>
 </div>
</td>

Edit:
I don't know which effect you're after, but here's a jsFiddle demonstrating the problem: http://jsfiddle.net/ygP7k/5/
It has a table with little absolutely positioned divs in each table cell, that are supposed to align to the bottom right corners. It works in all browsers except Mozilla ones.

But here is an updated one with the extra divs as I mentioned: http://jsfiddle.net/ygP7k/7/
This works exactly the same, except that it also does the trick in Firefox.

Can you work with this? Does this answer your question?

这篇关于在一个相对的容器问题内的绝对的Firefox位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！