파이어폭스는 테이블 요소에 상대적인 위치를 지원합니까?

파이어폭스는 테이블 요소에 상대적인 위치를 지원합니까?

사용하려고 할 때position: relative/position: absolute에서<th>아니면<td>파이어폭스에서는 작동하지 않는 것 같습니다.

가장 쉽고 적절한 방법은 셀의 내용물을 디브로 감싸고 해당 디브에 상대적인 위치를 추가하는 것입니다.

예:

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

그것은 아무 문제 없어야 해요.또한 다음을 설정해야 합니다.

display: block;

Internet Explorer 7, 8 및 9를 포함한 모든 웹 브라우저는 테이블 표시 요소의 상대적인 위치를 올바르게 처리하고 FireFox만 이를 잘못 처리하므로 자바스크립트 심을 사용하는 것이 좋습니다.결함이 있는 브라우저 하나에 대해서만 DOM을 재배치할 필요는 없습니다.사람들은 IE가 뭔가 잘못되고 다른 브라우저들이 모두 틀릴 때 항상 자바스크립트 심을 사용합니다.

여기 모든 HTML, CSS, 자바스크립트가 설명된 완전한 주석이 달린 jsfiddle이 있습니다.

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

위의 저의 jsfiddle 예제는 "응답형 웹 디자인" 기법을 사용하여 응답형 레이아웃과 함께 작동한다는 것을 보여줍니다.하지만 코드가 반응할 필요는 없습니다.

여기 아래 자바스크립트가 있지만 문맥상 그렇게 의미가 없을 것입니다.위의 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();

    }

});

파이어폭스 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>

여기서 변경 사항에 대한 개발자들의 논의를 계속해서 따라가면 됩니다(주제는 13년). https://bugzilla.mozilla.org/show_bug.cgi?id=63895

최근 출시 이력으로 판단해보면 빠르면 2014년 5월부터 사용 가능할 것으로 보입니다.저는 흥분을 거의 억누를 수가 없어요!

편집(6/10/14): Firefox 30이 오늘 출시되었습니다.곧 주요 데스크톱 브라우저에서 테이블 포지셔닝 문제가 발생하지 않습니다.

Firefox 3.6.13 현재 위치: 상대/절대는 테이블 요소에서 작동하지 않는 것 같습니다.이것은 파이어폭스의 오래된 행동인 것 같습니다.다음을 참조하십시오. http://csscreator.com/node/31771

CSS Creator 링크는 다음 W3C 참조를 게시합니다.

테이블-행-그룹, 테이블-헤더-그룹, 테이블-풋터-그룹, 테이블-행, 테이블-열-그룹, 테이블-열, 테이블-셀 및 테이블 캡션 요소에 대한 '위치:상대'의 영향은 정의되지 않습니다.http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

를 사용해 .display:inline-block저는 파이어폭스 11에서 테이블의 레이아웃을 파괴하지 않고 td/th 내에 위치 지정 기능을 제공할 수 있었습니다.께와 .position:relative∙ ∙ ∙ ∙ 가 알아서에요.그냥 내가 알아서 한거에요.

는 을 .table-cell는 a 는 a소던))였던 원소DIV한푼도TD)

교체했습니다

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

(Chrome에서 작동)과 함께

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

물론 상자 모형에서 패딩은 일반적으로 너비에 추가됩니다. 그러나 절대 너비에 관해서는 표가 항상 자신의 생각을 가지고 있는 것처럼 보이기 때문에 경우에 따라 효과가 있을 것입니다.

상위 요소에 display:block을 추가하면 firefox에서 작동합니다.Chrome이 작동하려면 상위:0px; left:0px; 를 상위 요소에 추가해야 했습니다.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>

허용된 해의 종류는 효과가 있지만 내용이 더 많은 다른 열을 추가하는 경우에는 효과가 없습니다.을 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/

언급URL : https://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements