10

Firefox でのこの配置の問題がわかりません。絶対配置ルールに従っていないようです。私がやるべきではないことはありますが、一部のブラウザはそれを処理し、一部のブラウザは処理しませんか?

JS フィドル:

オリジナル - http://jsfiddle.net/g9qzh/

更新 - http://jsfiddle.net/g9qzh/2/

IE、Chrome、Safari、Opera で動作

これが実際のコードです。私が知らない何らかの基準に従っていない場合はお知らせください。

HTML:

<table>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
</table>

CSS:

#two {
   position: absolute;
   top: 0;
}
td {
   position: relative;
}

td私の唯一の手がかりは、それを機能させるために割り当てる必要がある他の値があるということです。他のいくつかのスタックオーバーフローの質問では、Firefox がこれで誤動作していると述べていますが、私は答えを見つけることができませんでした。上と左の両方の値にゼロを割り当ててみましたが、FF は動きません。</p>

4

7 に答える 7

12

ID をクラスに変更し、ブロックとして表示すると修正されます。

http://jsfiddle.net/GchWZ/

このスタック オーバーフローの投稿から引用されているように、内側の div を使用する方が適切であり、より「適切」です。

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>
于 2012-06-13T18:49:33.807 に答える
1

問題は、FF がテーブルをレンダリングする方法にあります。TD を に設定すると、display:inline-block;正しく表示されるはずです。

于 2012-06-13T19:01:08.550 に答える
1

ID を使用しています

ID は一意です。スタイルの割り当てを再利用する場合は、クラスを使用します。

于 2012-06-13T18:45:54.990 に答える
1

これを試して：

<tr>
    <td>
        <div id="wrapper">
            <div id="three">Three</div>
            <div id="two">Two</div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div id="wrapper">
            <div id="three">Three</div>
            <div id="two">Two</div>
        </div>
    </td>
</tr>

そしてcssの場合：

#two {
    position: absolute;
    top: 0px;
}

#wrapper {
    position: relative;
}
于 2012-06-13T18:58:55.110 に答える
0

IDBrandt が指摘した重複の問題は別として、表のセルに配置を割り当てることは、せいぜい危険です。どのブラウザーでも機能することに驚いています。テーブルを使用する必要がある場合は、配置する要素を div にラップし、ラッパー div を割り当てますposition: relative。

<table>
    <tr>
        <td>
        <div class="wrapper">
            <div id="three">Three</div>
            <div id="two">Two</div>
        </div>
        </td>
    <tr>
</table>

CSS

#two {
   position: absolute;
   top: 0;
}
.wrapper {
   position: relative;
}
于 2012-06-13T18:51:04.413 に答える
-1

CSS 表示を使用する正当な理由があります: 表のスタイルです。これにより、display: block および display: inline-block が対処しない問題が解消されます。これらの理由は、CSS スタイリングに関する本の 1 章全体を占めているため、ここでは説明しません。その同じ本では、その表示タイプのアイテム内での配置の問題についても説明しています。CSS 2.1 仕様は単にこの問題に対処しておらず、Mozilla はこれらの要素を使用してポジショニング コンテキストを作成する試みを無視するコースを選択しました。CSS テーブルの配置は確立された成熟した方法論であり、「危険」ではありません。他の CSS 要素と同様に、その制限を理解する必要があります。リキッド レイアウトや、要素のサイズが可変または不明なその他のレイアウトでは、垂直方向の間隔と配置に不可欠です。

このスレッドで 1 つの提案が提示されました。「table-cell」要素内に div を作成し、position: relative に設定し、それを配置コンテキストに使用します。もう 1 つの方法は、そのセル内に別の CSS テーブルを埋め込み、それを使用して要素をグリッド内に配置することです。3 番目の方法は、ポジショニング コンテキストを作成する別のアイテム内に CSS テーブルをラップすることです。

于 2012-07-05T23:16:46.553 に答える