1

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

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

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

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

1 回答 1

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 }
于 2012-09-25T22:03:15.343 回答