web-dev-qa-db-ja.com

Firefoxは表要素の相対的な位置をサポートしていますか？

Firefoxでposition: relativeまたはposition: absoluteで<th>/<td>を使用しようとすると、動作しないようです。

cssfirefox
169
Ben Johnson

簡単で最も適切な方法は、セルの内容をdivにラップし、そのdivに対してposition：relativeを追加することです。

例：

<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>
168
DavidJonas

それは問題ないはずです。以下も設定することを忘れないでください：

display: block;
34
Justin Niessner

Internet Explorer 7、8、9を含むすべてのWebブラウザーはtable-display要素のposition：relativeを正しく処理し、FireFoxのみがこれを誤って処理するため、最善の策はJavaScriptシムを使用することです。障害のある1つのブラウザだけでDOMを再配置する必要はありません。 IEに問題が発生し、他のすべてのブラウザーがそれを正しく取得する場合、人々は常にJavaScriptシムを使用します。

以下に、すべてのHTML、CSS、およびJavaScriptを説明した完全に注釈付きのjsfiddleを示します。

http://jsfiddle.net/mrbinky3000/MfWuV/33/

上記の私のjsfiddleの例では、レスポンシブレイアウトで機能することを示すために、「レスポンシブWebデザイン」テクニックを使用しています。ただし、コードはレスポンシブである必要はありません。

以下にJavaScriptを示しますが、コンテキストからはそれほど意味がありません。上記のjsfiddleリンクを確認してください。

$(function() {
    // FireFox Shim
    // FireFox is the *only* browser that doesn't support position:relative for
    // block elements with display set to "table-cell." Use javascript to add
    // an inner div to that block and set the width and height via script.
    if ($.browser.mozilla) {

        // wrap the insides of the "table cell"            
        $('#test').wrapInner('<div class="ffpad"></div>');

        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;

            // remove any height that we gave ffpad so the browser can adjust size naturally.
            $ffpad.height(0);

            // Only do stuff if the immediate parent has a display of "table-cell".  We do this to
            // play nicely with responsive design.
            if ($parent.css('display') == 'table-cell') {               

                // include any padding, border, margin of the parent
                h = $parent.outerHeight();

                // set the height of our ffpad div
                $ffpad.height(h);

            }

        }


        // be Nice to fluid / responsive designs   
        $(window).on('resize', function() {
            ffpad();
        });

        // called only on first page load
        ffpad();

    }

});
13
mrbinky3000

Firefox 30以降、テーブルコンポーネントでpositionを使用できるようになります。現在のナイトリービルド（スタンドアロンとして動作）を試してみてください： http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

テストケース（ http://jsfiddle.net/acbabis/hpWZk/ ）：

<table>
    <tbody>
        <tr>
            <td style="width: 100px; height: 100px; background-color: red; position: relative">
                <div style="width: 10px; height: 10px; background-color: green; position: absolute; top: 10px; right: 10px"></div>
            </td>
        </tr>
    </tbody>
<table>

開発者の変更に関する議論は、ここで続けることができます（トピックは13yearsold）： https://bugzilla.mozilla.org/show_bug。 cgi？id = 63895

最近のリリース履歴 から判断すると、これは2014年5月に利用可能になります。興奮を抑えきれません！

EDIT（6/10/14）：Firefox 30は本日リリースされました。すぐに、主要なデスクトップブラウザーではテーブルの配置は問題になりません

10
acbabis

Firefox 3.6.13の時点で、position：relative/absoluteはテーブル要素では機能しないようです。これは長年のFirefoxの動作のようです。以下を参照してください。 http://csscreator.com/node/31771

CSS Creatorリンクは、次のW3C参照を投稿します。

Table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、およびtable-captionの要素に対する「position：relative」の効果未定義です。 http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

7
Ben Johnson

Firefox 11で機能していたdisplay:inline-blockを使用してみてください。テーブルのレイアウトを破壊することなく、td/th内での位置決め機能が得られます。 td/thのposition:relativeと組み合わせることで、物事が機能するはずです。自分で動作するようになりました。

3
Jonathan Dorsey

table-cell要素がありました（実際にはDIVではなくTDでした）

交換しました

display: table-cell;
position: relative;
left: .5em

（Chromeで機能しました）

display: table-cell;
padding-left: .5em

もちろん、ボックスモデルでは通常、パディングが幅に追加されますが、テーブルは絶対的な幅になると常に独自の心を持つように見えるため、これは場合によっては機能します。

1
Simon_Weaver

受け入れられているソリューションの種類は機能しますが、他の列よりもコンテンツの多い別の列を追加した場合は機能しません。 height:100%をtr、td＆divに追加すると、動作するはずです。

<tr style="height:100%">
  <td style="height:100%">
    <div style="position:relative; height:100%">
        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>
</tr>

唯一の問題は、これがChromeおよびIEではなく、FFの列の高さの問題のみを修正することです。一歩近づいていますが、完璧ではありません。

私はそれが機能していることを示すために、受け入れられた答えで機能していなかった1月のフィドルを更新しました。 http://jsfiddle.net/gvcLoz20/

0
Ben

親要素にdisplay：blockを追加すると、Firefoxでこれが機能します。 top：0pxも追加する必要がありました。左：0px; Chromeが機能する親要素に。 IE7、IE8、およびIE9も同様に機能しています。

<td style="position:relative; top:0px; left:0px; display:block;">
    <table>        
        // A table of information here. 
        // Next line is the child element I want to overlay on top of this table
    <tr><td style="position:absolute; top:5px; left:100px;">
        //child element info
    </td></tr>
   </table>
</td>
0
GrantE