我的 pong 项目在 FF 中的定位不正确答案

【问题标题】：My pong project is not positioning right in FF我的 pong 项目在 FF 中的定位不正确
【发布时间】：2012-04-12 12:42:09
【问题描述】：

http://warhawkcomputers.com/Birenbaum/Projects/Pong/Pong.html

大家好，所以我在网站的第四季度选项卡下修复了除 pong 之外的所有项目。它的按键和动作工作得很好，但由于某种原因，定位在 Firefox 中是关闭的。识别元素的 IE 和 FF 都与第二个表关联，但由于某种原因，Firefox 继续认为 (0,0) 是页面的左上角，而不是关联的表。谢谢大家。

【问题讨论】：

这是我第一次看到作业标签。很整洁。

标签： html css firefox

【解决方案1】：

当给项目一个绝对定位时，你会自动从下一个定义的容器中分配绝对定位。此容器还必须具有绝对定位，这些子元素才能从父容器的 0,0 位置进行绝对定位。

这是您的代码（来自您的页面）：

<table height="300" width="575" bordercolor="#000" border="1px" style="position:relative;"> 
<tr> 
<td> 
<img src="Images/Paddle1.JPG" style="position:absolute; top:5px; left:3px;" id="Paddle1" /> 
<img src="Images/Paddle2.JPG" style="position:absolute; top:5px; left:555px;" id="Paddle2" /> 
<img src="Images/Ball.JPG" style="position:absolute; top:120px; left:265px;" id="Ball" /> 
</td> 
</tr> 
</table>

为了使图像的绝对定位能够按照您希望它们在 FF 中的方式工作，您必须绝对定位包含它们的表格。

虽然我建议您使用 div 层来包含它们，但在您的情况下，您似乎可以通过在表格中创建三列并在 paddle1 的 td 和 right 上使用左对齐来使用更简单的方法（尽管不赞成）在 paddle2 的 td 上对齐...再次，但我建议您编写它以使用 div 层来控制布局，因为这在当今被认为是“正确的”。

Here's 方便参考定位视图。基本上，它让您知道 position 属性在大多数浏览器中都存在相当多的错误。我确信它可以在 IE 中工作，因为，有很多奇怪的编码示例可以在 IE 中工作......这很奇怪，但总是最好做到正确。 :)

【讨论】：

【解决方案2】：

您不能相对定位表格单元格，这就是为什么绝对定位在表格中不起作用的原因；）

我建议您在主表格单元格width: 575px height: 300px; 内放置一个容器 div，或者匹配该单元格的内部宽度高度并相对定位它

【讨论】：

【解决方案3】：

您需要将 position: relative; 添加到包含桨的 div。

【讨论】：