1

内部に絶対位置の段落があるテーブルがあります<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>
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 に答える