Firefox pozisyon: tablo öğelerine göre pozisyonu destekliyor mu?

position: relative/ position: absoluteÜzerinde <th>veya <td>Firefox'ta / kullanmaya çalıştığımda işe yaramıyor gibi görünüyor.

Kolay ve en uygun yol, hücrenin içeriğini bir div'a sarmak ve bu div'e göre konum eklemek olacaktır.

misal:

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

Hiç sorun değil. Ayrıca şunları ayarlamayı unutmayın:

display: block;

Internet Explorer 7, 8 ve 9 dahil olmak üzere her web tarayıcısı konumu doğru bir şekilde ele aldığından: bir tablo görüntüleme öğesine göre ve yalnızca FireFox bunu yanlış işlediğinden, en iyi seçeneğiniz bir JavaScript şim kullanmaktır. DOM'nizi yalnızca bir hatalı tarayıcı için yeniden düzenlemenize gerek yoktur. İnsanlar IE yanlış bir şey aldığında ve diğer tüm tarayıcılar doğru olsun JavaScript şimler kullanın.

İşte tüm HTML, CSS ve JavaScript açıklamalı tamamen açıklamalı bir jsfiddle.

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

Yukarıdaki benim jsfiddle örnek sadece duyarlı bir düzen ile çalışacağını göstermek için "Duyarlı Web Tasarım" tekniklerini kullanır. Ancak, kodunuzun duyarlı olması gerekmez.

İşte aşağıdaki JavaScript, ancak bağlamdan bu kadar anlamlı gelmeyecek. Lütfen yukarıdaki jsfiddle bağlantısına göz atın.

$(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();

    }

});

Firefox 30 ile başlayarak positiontablo bileşenlerinde kullanabilirsiniz . Mevcut gece yapımıyla kendiniz deneyebilirsiniz (bağımsız çalışır): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Test örneği ( 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>

Burada değişikliklerin geliştiricilerin tartışma takip etmeye devam edebilirsiniz (konu 13 olan yaş arası): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

Yakın tarihli yayın geçmişine bakılırsa , bu, Mayıs 2014'te mümkün olabilir. Heyecanımı zar zor içerebiliyorum!

EDIT (6/10/14): Firefox 30 bugün yayınlandı. Yakında, masa üstü konumlandırma büyük masaüstü tarayıcılarında sorun olmayacak

Firefox 3.6.13 itibariyle, position: relative / mutute tablo öğeleri üzerinde çalışmıyor gibi görünüyor. Bu uzun süredir devam eden Firefox davranışı gibi görünüyor. Aşağıdakilere bakın: http://csscreator.com/node/31771

CSS Oluşturucu bağlantısı aşağıdaki W3C başvurusunu gönderir:

'Position: relative' öğesinin table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell ve table-caption elemanları üzerindeki etkisi tanımsız. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

display:inline-blockFirefox 11'de benim için çalışmayı deneyin , masanın düzenini bozmadan bana td / th içinde konumlandırma yeteneği sağladı. Bu position:relativetd / th ile birlikte bir şeyler yapmak gerekir. Sadece kendim çalışıyordum.

Bir table-cellöğem vardı (bu aslında bir DIVdeğil TD)

Ben değiştirdim

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

(Chrome'da çalıştı) ile

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

Tabii ki dolgu genellikle kutu modelinde genişliğe eklenir - ancak mutlak genişlikler söz konusu olduğunda tabloların her zaman kendi fikirleri vardır - bu bazı durumlarda işe yarayacaktır.

Üst öğeye display: block eklenmesi, bunu firefox'ta çalıştırdı. Ayrıca top eklemek zorunda kaldı: 0px; left: 0px; Chrome'un çalışması için üst öğeye ekleyin. IE7, IE8 ve IE9 da çalışıyor.

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

Kabul edilen çözüm türü çalışır, ancak diğerine göre daha fazla içeriğe sahip başka bir sütun eklerseniz değil. Eğer eklerseniz height:100%sizin için tr , td & div sonra çalışması gerekir.

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

Tek sorun, bunun Chrome ve IE'de değil, yalnızca FF'deki sütun yüksekliği sorununu çözmesidir. Bu bir adım daha yakın, ama mükemmel değil.

Jan'ın çalıştığını göstermek için kabul edilen cevapla çalışmayan bir kemanı güncelledim. http://jsfiddle.net/gvcLoz20/