无法在 Firefox 的表格中绝对定位元素答案

【问题标题】：Cannot position elements absolutely in a table in Firefox无法在 Firefox 的表格中绝对定位元素
【发布时间】：2017-05-18 21:06:04
【问题描述】：

我在<p> 中有一个包含绝对位置段的表格。它在 Chrome 和 Opera 中呈现我想要的效果，但在 Firefox 中，所有数字都在表格之外并挤在一起。我尝试将position: relative; 添加到所有父元素，但没有太大帮助。问题出在哪里？我想这很简单。

是这样的：http://i50.tinypic.com/34diewz.png（我是新用户，还不能上传图片）

这些<p> 也必须绝对定位，因为在整个项目的表格单元格中还有其他元素——这段代码只是一小部分。这里是：

<!DOCTYPE html>
<html>
   <head>
      <style>
         * { margin: 0; padding: 0; } /* Just a quick reset, I use proper one in full project */

         table {
            background-color: #296B73;
         }

         td {
            position: relative;
            height: 40px; width: 40px;
            border: 1px solid #0F2D40;
         }

         p {
            position: absolute;
            top: 28%; left: 50%;
            margin-left: -5px;
         }

         td:nth-child(1) { width: 50px; }
         td:nth-child(2) { width: 75px; }
         td:nth-child(3) { width: 100px; }
      </style>
   </head>
   <body>
      <table>
         <tr>
            <td><p>1</p></td>
            <td><p>2</p></td>
            <td><p>3</p></td>
         </tr>
         <tr>
            <td><p>1</p></td>
            <td><p>2</p></td>
            <td><p>3</p></td>
         </tr>
         <tr>
            <td><p>1</p></td>
            <td><p>2</p></td>
            <td><p>3</p></td>
         </tr>
      </table>
   </body>
</html>

【问题讨论】：

与本帖类似：stackoverflow.com/questions/4564638/…
@jfrank 对，这正是我的问题，谢谢。我已经搜索过答案但没有找到，我还是个菜鸟。

标签： firefox html-table css-position

【解决方案1】：

您不能相对定位 TD，因此您需要为 P 放置一个周围的容器：

<td><div><p>1</p></div></td>
<td><div><p>2</p></div></td>
<td><div><p>3</p></div></td>

然后在 CSS 中：

td div { position: relative }

【讨论】：