Internet Explorer 7, 8 및 9를 포함한 모든 웹 브라우저는 테이블 표시 요소에서 position : relative를 올바르게 처리하고 FireFox만이를 잘못 처리하므로 JavaScript shim을 사용하는 것이 가장 좋습니다. 하나의 잘못된 브라우저에 대해서만 DOM을 재 배열 할 필요는 없습니다. 사람들은 IE가 뭔가 잘못되고 다른 모든 브라우저가 올바르게 얻을 때 항상 JavaScript shim을 사용합니다.

여기에 모든 HTML, CSS 및 JavaScript가 설명 된 완전히 주석이 달린 jsfiddle이 있습니다.

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

위의 jsfiddle 예제는 “응답 성 웹 디자인”기술을 사용하여 반응 형 레이아웃에서 작동 함을 보여줍니다. 그러나 코드가 반응 할 필요는 없습니다.

아래에 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();

    }

});

답변

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

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

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