JQuery возвращает разные высоты для тех же объектов в WebKit (chrome) и Firefox

Im озадачен этим.

jQuery.height() возвращается с разными значениями в Firefox и Chrome. Измерение пикселей на экране показывает, что из двух, Chrome, кажется, сообщает правильное значение, в то время как firefox отключается на 2 или 3 пикселя каждый раз. Кто-нибудь еще столкнулся с этой проблемой?

Я попытался захватить высоту, используя различные функции высоты jQuery (innerHeight, outerHeight, height), но безрезультатно. Я разделил все стили CSS, которые могли потенциально мешать значению высоты (все дополнения, границы, маржа и т.д.), Но я все же получаю противоречивые результаты.

Если это помогает, я имею дело с ячейками таблицы. Код создает вторую таблицу рядом с первой, а затем соответствует высоте каждой строки, чтобы создать своего рода "липкий" левый столбец в таблице. Ячейки имеют различное содержимое, но соответствуют значениям 0 для границы, заполнения и поля со всех сторон.

ИЗМЕНИТЬ Через 6 часов эта проблема продолжает преследовать меня.

Когда я устанавливаю границы и переключаюсь на использование innerHeight(), чтобы получить измерение высоты, оба браузера отлично его отражают. Но мне нужно получить нижнюю границу там...

В настоящий момент у меня есть webkit, который отлично отображает таблицу с границами, а firefox отключается на 1px в каждой ячейке. Я переключился на использование функции jQuery innerHeight(), чтобы захватить высоты ячеек в таблице "master", но почему-то firefox всегда выделяет пиксель на измерение.

Вот соответствующий код. Обратите внимание, что HTML копируется из firebug ПОСЛЕ того, что он генерируется javascript, поэтому там создаются объявления высоты. "master" table HTML:

<table cellpadding="0" border="0" class="items-table">
<tbody>
    <tr class="selected">
        <td itemid="70609" class="id" style="display: none;">
            70609
        </td>
        <td class="thumb">
            <div class="item-thumb">
                <div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/2C5D13C6-8A9F-47D9-81B51305D3FF24A9_t.jpg&quot;);" class="item-thumb-image">
                    <img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/2C5D13C6-8A9F-47D9-81B51305D3FF24A9_t.jpg">
                </div>
            </div>
        </td>
        <td class="details">
            <div class="name">
                <span class="code">R1000</span> <span class="description">Armoire</span>
            </div>
            <div class="itemtype">
                <span>Casegoods</span> <input type="hidden" value="13" name="70609-itemtypeid" id="70609-itemtypeid" class="itemtypeid">
            </div>
        </td>
    </tr>
    <tr class="selected">
        <td itemid="70634" class="id" style="display: none;">
            70634
        </td>
        <td class="thumb">
            <div class="item-thumb">
                <div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/29DA825A-0431-49ED-A2614B3544EB50D2_t.jpg&quot;);" class="item-thumb-image">
                    <img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/29DA825A-0431-49ED-A2614B3544EB50D2_t.jpg">
                </div>
            </div>
        </td>
        <td class="details">
            <div class="name">
                <span class="code">C1124</span> <span class="description">Nightstand</span>
            </div>
            <div class="itemtype">
                <span>Casegoods</span> <input type="hidden" value="13" name="70634-itemtypeid" id="70634-itemtypeid" class="itemtypeid">
            </div>
        </td>
    </tr>
    <tr class="selected">
        <td itemid="70642" class="id" style="display: none;">
            70642
        </td>
        <td class="thumb">
            <div class="item-thumb">
                <div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/46AAB8C6-7BAD-4740-8B26A05521025029_t.jpg&quot;);" class="item-thumb-image">
                    <img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/46AAB8C6-7BAD-4740-8B26A05521025029_t.jpg">
                </div>
            </div>
        </td>
        <td class="details">
            <div class="name">
                <span class="code">999</span> <span class="description">Nice Table New Name</span>
            </div>
            <div class="itemtype">
                <span>Casegoods</span> <input type="hidden" value="13" name="70642-itemtypeid" id="70642-itemtypeid" class="itemtypeid">
            </div>
        </td>
    </tr>
    <tr class="selected">
        <td itemid="70643" class="id" style="display: none;">
            70643
        </td>
        <td class="thumb">
            <div class="item-thumb">
                <div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/71F27D5A-8BA6-428B-BAD842D699B6591A_t.jpg&quot;);" class="item-thumb-image">
                    <img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/71F27D5A-8BA6-428B-BAD842D699B6591A_t.jpg">
                </div>
            </div>
        </td>
        <td class="details">
            <div class="name">
                <span class="code">OC603</span> <span class="description">Coffee Table</span>
            </div>
            <div class="itemtype">
                <span>Casegoods</span> <input type="hidden" value="13" name="70643-itemtypeid" id="70643-itemtypeid" class="itemtypeid">
            </div>
        </td>
    </tr>
    <tr class="">
        <td itemid="70644" class="id" style="display: none;">
            70644
        </td>
        <td class="thumb">
            <div class="item-thumb">
                <div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/BB263083-013F-4188-BF26CA77CF66C1E5_t.jpg&quot;);" class="item-thumb-image">
                    <img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/BB263083-013F-4188-BF26CA77CF66C1E5_t.jpg">
                </div>
            </div>
        </td>
        <td class="details">
            <div class="name">
                <span class="code">OC606</span> <span class="description">Coffee Table</span>
            </div>
            <div class="itemtype">
                <span>Casegoods</span> <input type="hidden" value="13" name="70644-itemtypeid" id="70644-itemtypeid" class="itemtypeid">
            </div>
        </td>
    </tr>
</tbody>

вторичная таблица HTML:

<table cellpadding="0" border="0" class="items-table">
    <tbody>
        <tr>
            <td itemid="70609" class="id" style="height: 45px;"></td>
            <td data-contactid="34759" class="bid pending" style="height: 45px;">
                <div class="bid-container">
                    &nbsp;
                    <div>
                        Sent 2 days ago
                    </div>
                </div>
            </td>
            <td data-contactid="34746" class="bid" style="height: 45px;">
                <div class="bid-container">
                    &nbsp;
                </div>
            </td>
        </tr>
        <tr>
            <td itemid="70634" class="id" style="height: 53px;"></td>
            <td data-contactid="34759" class="bid" style="height: 53px;">
                <div class="bid-container">
                    &nbsp;
                </div>
            </td>
            <td data-contactid="34746" class="bid bid-data assigned" style="height: 53px;">
                <div class="bid-container">
                    &nbsp;
                    <div class="cost">
                        $90.00
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td itemid="70642" class="id" style="height: 53px;"></td>
            <td data-contactid="34759" class="bid pending" style="height: 53px;">
                <div class="bid-container">
                    &nbsp;
                    <div>
                        Sent 2 days ago
                    </div>
                </div>
            </td>
            <td data-contactid="34746" class="bid" style="height: 53px;">
                <div class="bid-container">
                    &nbsp;
                </div>
            </td>
        </tr>
        <tr>
            <td itemid="70643" class="id" style="height: 45px;"></td>
            <td data-contactid="34759" class="bid pending" style="height: 45px;">
                <div class="bid-container">
                    &nbsp;
                    <div>
                        Sent 2 days ago
                    </div>
                </div>
            </td>
            <td data-contactid="34746" class="bid" style="height: 45px;">
                <div class="bid-container">
                    &nbsp;
                </div>
            </td>
        </tr>
        <tr>
            <td itemid="70644" class="id" style="height: 45px;"></td>
            <td data-contactid="34759" class="bid" style="height: 45px;">
                <div class="bid-container">
                    &nbsp;
                </div>
            </td>
            <td data-contactid="34746" class="bid" style="height: 45px;">
                <div class="bid-container">
                    &nbsp;
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

.items-table {
    font-size: 12px;
    color: #252629;
    position: relative;
}
.items-table td {
    height: 46px;
    padding: 4px;
    border-bottom: 1px solid #E0E3E3;
    vertical-align: top;
}
.items-table .item-thumb { margin-right: 0px; }

.items-table tr { cursor: pointer; }

.items-table td.id { display:none; }
.items-table td.checkbox { width: 16px; padding: 0 6px 0 9px; vertical-align: middle; }
.items-table td.thumb { width: 48px; vertical-align: middle; }

.items-table td.details { vertical-align: middle; }
.items-table td.details .code { font-weight: bold; }
.items-table td.details .itemtype { color: #606060; }

.items-table tr.selected td {
    background: #E3E3E3;
}
.items-table tr:hover td { background: #ccdbe5; }
.items-table tr.active td { background: #1f6497 url('/images/selected-item.png') repeat-x  top left; color: white; font-weight: bold; }
.items-table tr.active .itemtype { color: #C1C5E1; }

.items-table .cost { padding: 2px 0 0 0; }
.items-table .tags { padding: 2px 0 0 0; }

jQuery business:

$('#items .items-table tr').each(function() {
                        var ti = $(this).find('.id').text();
                        $('#bids .items-table').append("<tr><td class='id' itemid='"+ti+"'></td>"+newCells+"</tr>")
                        var th = $(this).find('td.thumb').innerHeight();
                        $('#bids .items-table').find('tr:last td').height(th);
                    });

И вот как это выглядит в Chrome: alt text http://dl.dropbox.com/u/5536259/chromeSpacing.png

Firefox: alt text http://dl.dropbox.com/u/5536259/firefoxSpacing.png

Ответ 1

Вы пытались не стилизовать элементы TD вообще, а вместо этого элементы DIV, которые обертывают ячейку? Затем вычислите и установите высоты DIV, потому что это более надежно? Пусть таблица автоматически устанавливает высоту ячейки на основе ее содержимого. Это, потому что вы уже доказали, что разные браузеры вычисляют высоты TD по-разному (с границей...)

Ответ 2

Firefox и вообще, браузеры, основанные на Gecko, отличаются от других тем, что они пытаются сделать подпиксельный макет и рендеринг.
Это может усложнить жизнь, особенно если вы работаете с ячейками таблицы, размер которых зависит от их содержимого.
IE, Webkit и Gecko могут сообщать о разных измерениях - последние сообщают о некоторых экзотических дробных размерах.
Что касается ошибки: после того, как я боролся с чем-то похожим - измеряя размеры ячеек таблицы с динамическим размером, я на некоторое время создал специальный корпус для дробных чисел.

Поскольку это влияет как на позиции, так и на размеры, некоторые люди используют clientWidth вместо jQuery 'innerWidth()', в то время как некоторые просто используйте parseInt() по возвращенным результатам. (Найдите fract в источниках.)

Если это неудовлетворительно, вы можете попробовать следующее:

по умолчанию выводить основную таблицу с "видимостью: скрытой", чтобы она была выложена, но не отображалась.
измерять высоты ячеек из jQuery
округлите высоту до ближайшего целочисленного значения в первичной таблице и примените ее как встроенный стиль (округление может быть хорошей идеей, чтобы гарантировать, что ячейки не разрезают содержимое на 1px)
отображает вторичную таблицу на основе этих целых значений и восстанавливает видимость первичной таблицы

Возможно, все еще будут иметь место несогласованные границы - это может иметь место, если позиция первичной и вторичной таблиц не одинаковая (например: первичная вершина: 123.75px, вторичная вершина: 123px.) В этом случае, размещение таблиц в общем контейнере или просто перемещение в целые координаты могут помочь.

Удачи...

Изменить: насколько я помню, из-за некоторых аномалий IE и border-collapse я прибегал к (устаревшим) cellspacing свойство, которое должно быть помещено в элемент таблицы в HTML, а не в CSS, и указать отдельные границы с размером 0 в CSS. Я поместил всю таблицу в div с хорошим фоновым цветом.
Все это имело эффект, как если бы границы стола были 1px, рухнули с цветом фона div....

Ответ 3

У меня была аналогичная проблема, которая кажется ошибкой, хотя я не уверен на 100%. Если, например, определенный элемент имеет дополнение, innerHeight() не показывал тот же результат в Webkit и Firefox. В качестве временного исправления я использовал как innerHeight(), так и height(), чтобы получить правильную высоту для этого элемента.

Точно так же я не мог использовать height(), чтобы показывать то же самое в браузерах (IE и другие). Я использовал что-то вроде этого, которое работало в браузерах:

$("#element").css('height', '100');

См. также innerHeight() и outerHeight(), если вы хотите включить отступы/границы/поля.

Ответ 4

Firefox - это часть дерьма. Добавление контейнера <div> и запуск outerHeight(), что устраняет проблему.