jQuery为WebKit（chrome）和Firefox中的相同对象返回不同的高度 [英] jQuery returning different heights for the same objects in WebKit (chrome) and Firefox
本文介绍了jQuery为WebKit（chrome）和Firefox中的相同对象返回不同的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
jQuery.height（）在Firefox和Chrome中有着不同的价值。测量屏幕上的像素表明两者中，Chrome似乎报告正确的值，而Firefox每次关闭2或3像素。有没有其他人遇到过这个问题？
我试过用各种jQuery高度函数（innerHeight，outerHeight，height）来抓取高度无济于事。我已经剥离了所有的CSS样式，可能有干扰的高度值（所有填充，边框，边距等），但我仍然得到不一致的结果。
如果它帮助，我正在处理表格单元格。代码在第一个表格旁边创建第二个表格，然后匹配每行的高度，在表格上创建一种粘性左手列。这些单元格有不同的内容，但边界，填充和边缘匹配0值。
编辑
6小时后，这个问题继续困扰着我。
当我把nix边框切换到使用innerHeight（）来获得高度测量值时，两个浏览器都能完美呈现它。但我需要在那里得到一个底部边界...
现在我有webkit渲染与边界完美的表，和Firefox 1px关闭每个细胞。我切换到使用jQuery的innerHeight（）函数来抓住主表格上的单元格的高度，但不知何故，firefox总是出现一个像素短测量。
这是涉及的相关代码。请注意，该HTML是从firebug复制后，由JavaScript生成的，所以高度声明正在那里。 'master'table HTML：
< table cellpadding =0border =0class =items-table >
< tbody>
< tr class =selected>
< td itemid =70609class =idstyle =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;）;类= 项-拇指图像 >
< 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 =hiddenvalue =13name =70609-itemtypeidid =70609-itemtypeidclass =itemtypeid>
< / div>
< / td>
< / tr>
< tr class =selected>
< td itemid =70634class =idstyle =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;）;类= 项-拇指图像 >
< 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>床头柜< / span>
< / div>
< div class =itemtype>
< span> Casegoods< / span> < input type =hiddenvalue =13name =70634-itemtypeidid =70634-itemtypeidclass =itemtypeid>
< / div>
< / td>
< / tr>
< tr class =selected>
< td itemid =70642class =idstyle =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;）;类= 项-拇指图像 >
< 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>不错的表格新名称< / span>
< / div>
< div class =itemtype>
< span> Casegoods< / span> < input type =hiddenvalue =13name =70642-itemtypeidid =70642-itemtypeidclass =itemtypeid>
< / div>
< / td>
< / tr>
< tr class =selected>
< td itemid =70643class =idstyle =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;）;类= 项-拇指图像 >
< 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 =hiddenvalue =13name =70643-itemtypeidid =70643-itemtypeidclass =itemtypeid>
< / div>
< / td>
< / tr>
< tr class =>
< td itemid =70644class =idstyle =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;）;类= 项-拇指图像 >
< 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 =hiddenvalue =13name =70644-itemtypeidid =70644-itemtypeidclass =itemtypeid>
< / div>
< / td>
< / tr>
< / tbody>
辅助表格HTML： p>
< table cellpadding =0border =0class =items-table>
< tbody>
< tr>
< td itemid =70609class =idstyle =height：45px;>< / td>
< td data-contactid =34759class =bid pendingstyle =height：45px;>
< div class =bid-container>
& nbsp;
< div>
2天前发送
< / div>
< / div>
< / td>
< td data-contactid =34746class =bidstyle =height：45px;>
< div class =bid-container>
& nbsp;
< / div>
< / td>
< / tr>
< tr>
< td itemid =70634class =idstyle =height：53px;>< / td>
< td data-contactid =34759class =bidstyle =height：53px;>
< div class =bid-container>
& nbsp;
< / div>
< / td>
< td data-contactid =34746class =bid bid-data assignedstyle =height：53px;>
< div class =bid-container>
& nbsp;
< div class =cost>
$ 90.00
< / div>
< / div>
< / td>
< / tr>
< tr>
< td itemid =70642class =idstyle =height：53px;>< / td>
< td data-contactid =34759class =bid pendingstyle =height：53px;>
< div class =bid-container>
& nbsp;
< div>
2天前发送
< / div>
< / div>
< / td>
< td data-contactid =34746class =bidstyle =height：53px;>
< div class =bid-container>
& nbsp;
< / div>
< / td>
< / tr>
< tr>
< td itemid =70643class =idstyle =height：45px;>< / td>
< td data-contactid =34759class =bid pendingstyle =height：45px;>
< div class =bid-container>
& nbsp;
< div>
2天前发送
< / div>
< / div>
< / td>
< td data-contactid =34746class =bidstyle =height：45px;>
< div class =bid-container>
& nbsp;
< / div>
< / td>
< / tr>
< tr>
< td itemid =70644class =idstyle =height：45px;>< / td>
< td data-contactid =34759class =bidstyle =height：45px;>
< div class =bid-container>
& nbsp;
< / div>
< / td>
< td data-contactid =34746class =bidstyle =height：45px;>
< div class =bid-container>
& nbsp;
< / div>
< / td>
< / tr>
< / tbody>
< / table>
CSS：
.items-table {
font-size：12px;
颜色：＃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;白颜色; 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商业：
$（'＃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）;
}）;
Firefox：
alt text http://dl.dropbox.com/u/5536259 /firefoxSpacing.png
解决方案
您是否尝试过不设计 TD 元素，而是包装单元格的 DIV 元素？那么，计算和设置DIV高度，因为这是更可靠？让表格根据其内容自动设置单元格高度。
这个，因为你已经证明不同的浏览器不同的计算TD高度（有边界...）
Im perplexed by this one.
jQuery.height() is coming back with different values in Firefox and Chrome. Measuring the pixels on-screen indicates that of the two, Chrome appears to be reporting the correct value, while firefox is off by 2 or 3 pixels each time. Has anyone else encountered this issue?
I've tried grabbing the height using the various jQuery height functions (innerHeight, outerHeight, height) to no avail. I have stripped all css styling that may have potentially been interfering with the height value (all padding, borders, margin, etc) yet I still get inconsistent results.
If it helps, I am dealing with table cells. The code creates a second table alongside the first, and then matches the height of each row to create a sort of "sticky" left hand column on the table. The cells have varying content but matching 0 values for border, padding and margin on all sides.
EDIT 6 hours later, this problem continues to stump me.
When I nix the borders and switch to using innerHeight() to get the height measurement, both browsers render it perfectly. But I need to get a bottom-border in there...
At the moment I have webkit rendering the table with the borders perfectly, and firefox is off by 1px on each cell. I switched to using jQuery's innerHeight() function to grab the heights of the cells on the 'master' table, but somehow firefox always comes up a pixel short on the measurement.
Here is the relevant code involved. Note that the HTML is copied from firebug AFTER being generated by the javascript, so the height declarations are being made there. '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("http://c1263382.cdn.cloudfiles.rackspacecloud.com/2C5D13C6-8A9F-47D9-81B51305D3FF24A9_t.jpg");" 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("http://c1263382.cdn.cloudfiles.rackspacecloud.com/29DA825A-0431-49ED-A2614B3544EB50D2_t.jpg");" 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("http://c1263382.cdn.cloudfiles.rackspacecloud.com/46AAB8C6-7BAD-4740-8B26A05521025029_t.jpg");" 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("http://c1263382.cdn.cloudfiles.rackspacecloud.com/71F27D5A-8BA6-428B-BAD842D699B6591A_t.jpg");" 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("http://c1263382.cdn.cloudfiles.rackspacecloud.com/BB263083-013F-4188-BF26CA77CF66C1E5_t.jpg");" 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>
secondary table 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">
<div>
Sent 2 days ago
</div>
</div>
</td>
<td data-contactid="34746" class="bid" style="height: 45px;">
<div class="bid-container">
</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">
</div>
</td>
<td data-contactid="34746" class="bid bid-data assigned" style="height: 53px;">
<div class="bid-container">
<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">
<div>
Sent 2 days ago
</div>
</div>
</td>
<td data-contactid="34746" class="bid" style="height: 53px;">
<div class="bid-container">
</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">
<div>
Sent 2 days ago
</div>
</div>
</td>
<td data-contactid="34746" class="bid" style="height: 45px;">
<div class="bid-container">
</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">
</div>
</td>
<td data-contactid="34746" class="bid" style="height: 45px;">
<div class="bid-container">
</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);
});
And this is what it looks like in Chrome: alt text http://dl.dropbox.com/u/5536259/chromeSpacing.png
Firefox: alt text http://dl.dropbox.com/u/5536259/firefoxSpacing.png
解决方案
Have you tried not styling the TD elements at all, but instead the DIV elements that wrap the cell? Then, calculate and set the DIV heights because that is more reliable? Let the table set the cell height automatically based on its content. This, because you already proved that the different browsers calculate TD heights differently (with border...)
这篇关于jQuery为WebKit（chrome）和Firefox中的相同对象返回不同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![alt text http://dl.dropbox.com/u/5536259 /firefoxSpacing.png](\"http://dl.dropbox.com/u/5536259/firefoxSpacing.png\"){kind=link}
