Question

我在<p>内有一个绝对positioneg段落的表。它在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>

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

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

1 个答案: