Какой обходной путь, когда Firefox 4 сообщает о несовместимом offsetWidth для ячеек таблицы - PullRequest
Новая
       23

Какой обходной путь, когда Firefox 4 сообщает о несовместимом offsetWidth для ячеек таблицы

0 голосов
/ 23 июня 2011

У меня есть веб-элемент управления типа диаграммы Ганта: html-таблица ячеек (например, одна ячейка представляет один день) и некоторые абсолютно позиционированные div-ы, представляющие столбцы - родительский элемент div является подходящим начальным TD. Я установил ширину div, чтобы они покрывали соответствующее количество дней. Ширина рассчитывается путем суммирования значений offsetWidth ячеек, охватываемых div.

Это работает правильно в IE7, Chrome и Opera (и я думаю, в Firefox 2), но не в Firefox 4 . Длина div иногда слишком короткая, иногда слишком длинная. Из рассмотрения проблемы видно, что это связано с проблемой субпикселя, подобной , которая описана здесь

То, что я вижу (см. Исходный HTML ниже), это то, что моя таблица шириной 100% (ее смещение offsetWidth составляет 1311 пикселей) разделена на 30 ячеек, которые в среднем должны занимать 43,7 пикселей. Очевидно, что он должен использовать целые числа, но Firefox 4 сообщает, что каждая ячейка имеет offsetWidth = 44 пикселя, таким образом, для div, который покрывает каждую ячейку, его offsetWidth составляет 1320 пикселей (от 9 пикселей до большого). Очевидно, таблица сохраняет свою ширину 1311 пикселей, что указывает на то, что смещение ячейки, вероятно, составляет 44, тогда как в некоторых случаях ячейка физически занимает 43 пикселя

.

По сравнению с Chrome, Opera и IE7 смещение ширины ячеек составляет 44 и 43 пикселя, но в итоге получается правильная конечная ширина 1311.

Вопрос в том, как мне обойти это поведение Firefox4, чтобы убедиться, что мои div имеют правильную длину.

Я еще не тестировал другие версии IE

Вот упрощенный рабочий пример проблемы: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
    <title>Planner Test</title>
    <style type="text/css">

    body
    {
        font-size:10px;
    }
    table
    {
        width:100%;
        border-collapse:collapse;
        border-spacing:0px;
        table_layout:fixed;
        margin: 0px 0px 0px 0px;
        padding: Opx 0px 0px 0px;

    }

    table td,
    table th
    {
        overflow: hidden;
        vertical-align:top; 
        height:19px;
        border:1px solid red;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    div.PlannerItem
    {
        text-align:right;
        overflow: hidden;
        position:absolute;
        height:16px;

        border: solid 0px black;
        background-color: yellow;
        color: #334575;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

    </style>
    <script type="text/javascript">
    //<![CDATA[

    function WIDTH( el ) {
        // use offsetWidth - supposed to be most consistent accross browsers
        return parseInt( el.offsetWidth );
    }

    function createRows()
    {
        var nbCells = 30;  // set to vary the number of cells

        var thead = document.getElementById( "tablehead" );
        var fragment = document.createDocumentFragment();
        var row = document.createElement( "tr" );
        var th;

        // create header row % width calculated from nbCells
        for( i = 0; i < nbCells; i++ ) {
            th = document.createElement( "th" );

            th.style.width = (100.0 / nbCells) + "%";
            row.appendChild( th );
        }
        fragment.appendChild(row);
        thead.appendChild(fragment );

        // body rows
        var tbody = document.getElementById( "tablebody" );

        for ( i = 0; i < nbCells; i++ ) {
            fragment = document.createDocumentFragment();
            row = document.createElement("tr");
            for ( j = 0; j < nbCells; j++ ) {
                var cell = document.createElement( "td" );
                if ( j == 0 ) {
                    var div = document.createElement("div");
                    div.className = "PlannerItem";
                    cell.appendChild( div );
                }
                row.appendChild( cell );
            }

            fragment.appendChild(row );
            tbody.appendChild(  fragment );
        }

        setWidths();

    }
    function setWidths()
    {
        var rows = document.getElementsByTagName( "tr" );

        // show cell widths in header
        cells = rows[0].getElementsByTagName( "th" );
        for( i = 0; i < cells.length; i++ ) {
            cells[i].innerHTML = WIDTH(cells[i]);
        }

        // calculate widths for divs 
        for( i = 1; i < rows.length; i++ ) {
            var cells = rows[i].getElementsByTagName( "td" );
            var width = 0;
            var div = cells[0].firstChild;
            for( j = 0; j < i; j++ ) {

                width += parseInt( WIDTH( cells[j]) );

            }

            div.style.width = width + "px";
            div.innerHTML = WIDTH(div);
        }
    }//]]>
    </script>

</head>
<body onload='createRows();'>
    <form id="form1" runat="server" >
        <table id="tab">
            <thead id="tablehead">
            </thead>
            <tfoot></tfoot>
            <tbody id='tablebody'></tbody>
        </table>
    </form>
</body>
</html>

1 Ответ

0 голосов
/ 24 июня 2011

Похоже, использование getBoundingClientRec () вместо offsetWidth (см. http://weblogs.mozillazine.org/roc/archives/2008/01/subpixel_layout.html) исправляет проблему - необходимо рассчитать ширину div, используя это значение, чтобы не потерять точность: элементы div правильно выстраиваются в соответствии с ячейками в этом случай

...