jQuery为WebKit(chrome)和Firefox中的相同对象返回不同的高度

Question

jQuery为WebKit(chrome)和Firefox中的相同对象返回不同的高度

Jor*_*kin 12 javascript firefox jquery webkit

我被这个困惑了.

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'表格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>

Run Code Online (Sandbox Code Playgroud)

辅助表格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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

jQuery业务:

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

Run Code Online (Sandbox Code Playgroud)

这就是Chrome中的样子: alt text http://dl.dropbox.com/u/5536259/chromeSpacing.png

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

Answer 1

And*_*ass 13

Firefox和一般情况下,基于Gecko的浏览器与其他浏览器的不同之处在于它们尝试进行子像素布局和渲染.
这可能会使生活变得困难,特别是如果您使用基于其内容大小的表格单元格.
IE,Webkit和Gecko可以报告不同的维度 - 后者报告了一些奇特的分数大小.
至于错误:经过类似的东西挣扎 - 测量动态大小的表格单元的尺寸 - 有一段时间,我最终得到了特殊的分数数字套管.

由于它影响位置和尺寸,有些人最终使用clientWidth而不是jQuery的'innerWidth()',而有些人只是使用parseInt()返回的结果.(fract在消息来源中搜索.)

如果不满意,您可以尝试以下方法:

默认情况下,使用"visibility:hidden"呈现主表,以便布局但不显示
从jQuery测量单元格高度
将高度四舍五入到主表中最接近的整数值并应用为内联样式(向上舍入可能是一个好主意,以确保单元格不会将内容减少1px)
基于这些整数值呈现辅助表并恢复主表的可见性

可能仍然会出现边框未对齐的情况 - 如果主表和辅助表的位置不相同(例如:主要顶部:123.75px,次要顶部:123px),则可能出现这种情况.在这种情况下,放置表格在一个公共容器中或只是重新定位到整数坐标可能会有所帮助.

祝好运...

编辑:据我记忆,由于一些IE和边界崩溃异常,我采用了(已弃用)cellspacing属性 - 应该将表元素放在HTML而不是CSS中 - 并指定尺寸为0in的单独边框CSS.我将整张桌子放在一个背景色很好的div中.
整个事情的效果好像表格边框是1px,折叠有背景div的颜色....

Answer 2

Mic*_*ler 4

您是否尝试过根本不设置TD元素的样式，而是设置包裹单元格的DIV元素？然后，计算并设置DIV高度，因为这样更可靠？让表格根据其内容自动设置单元格高度。这是因为您已经证明不同的浏览器计算 TD 高度的方式不同（带边框...）

归档时间：	15 年，3 月前
查看次数：	10883 次
最近记录：	12 年，2 月前