javascript jQuery 为 WebKit (chrome) 和 Firefox 中的相同对象返回不同的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3367405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery returning different heights for the same objects in WebKit (chrome) and Firefox
提问by Jordan Sitkin
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?
jQuery.height() 在 Firefox 和 Chrome 中以不同的值回归。测量屏幕上的像素表明，在两者中，Chrome 似乎报告了正确的值，而 firefox 每次都会关闭 2 或 3 个像素。有没有其他人遇到过这个问题？
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.
我试过使用各种 jQuery 高度函数（innerHeight、outerHeight、height）来获取高度，但无济于事。我已经删除了所有可能干扰高度值（所有填充、边框、边距等）的 css 样式，但我仍然得到不一致的结果。
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.
如果有帮助，我正在处理表格单元格。该代码在第一个表格旁边创建了第二个表格，然后匹配每行的高度以在表格上创建一种“粘性”左侧列。单元格的内容各不相同，但所有边的边框、填充和边距都匹配 0 值。
EDIT6 hours later, this problem continues to stump me.
编辑6 小时后，这个问题继续困扰着我。
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...
当我取消边框并切换到使用 innerHeight() 来获取高度测量值时，两个浏览器都能完美地呈现它。但我需要在那里得到一个底部边界......
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.
目前我有 webkit 完美地渲染带有边框的表格，并且每个单元格上的 Firefox 关闭 1px。我改用 jQuery 的 innerHeight() 函数来获取“主”表上单元格的高度，但不知何故，firefox 总是在测量时出现一个像素短。
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:
这是涉及的相关代码。请注意，HTML 是在 javascript 生成后从 firebug 复制的，因此在那里进行了高度声明。“主”表 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">Armtheitroade</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:
辅助表 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">
.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:
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:
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);
});
And this is what it looks like in Chrome: alt text http://dl.dropbox.com/u/5536259/chromeSpacing.png
这就是它在 Chrome 中的样子： 替代文本 http://dl.dropbox.com/u/5536259/chromeSpacing.png
Firefox: alt text http://dl.dropbox.com/u/5536259/firefoxSpacing.png
采纳答案by Michael Butler
Have you tried not styling the TDelements at all, but instead the DIVelements 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...)
您是否尝试过根本不为TD元素设置样式，而是使用包裹单元格的DIV元素？然后，计算并设置 DIV 高度，因为这样更可靠？让表格根据其内容自动设置单元格高度。这是因为你已经证明了不同的浏览器以不同的方式计算 TD 高度（带边框......）
回答by Andras Vass
Firefox and in general, Gecko based browsers differ from others in that they try to do subpixel layout and rendering.
This can make life hard especially if you work with table cells that are sized based on their contents.
IE, Webkit and Gecko can report different dimensions - the latter reporting some exotic fractional sizes as well.
As for the bug: after struggling with something similar - measuring dimensions of dynamically sized table cells - for a while, I had ended up special casing for fractional numbers.
Firefox 和一般基于 Gecko 的浏览器与其他浏览器的不同之处在于它们尝试进行子像素布局和渲染。
这会让生活变得艰难，特别是如果您使用根据其内容调整大小的表格单元格。
IE、Webkit 和 Gecko 可以报告不同的维度——后者也报告一些奇特的分数大小。
至于错误：在尝试了类似的东西之后——测量动态大小的表格单元格的尺寸——一段时间后，我最终得到了小数的特殊大小写。
As it influences positions as well as dimensions, some people ended up using clientWidthinstead of jQuery's 'innerWidth()', while some just use parseInt()on the returned results.
(Search for fractin the sources.)
因为它影响的位置以及尺寸，有些人最终使用clientWidth，而不是jQuery的“innerWidth（）”，而有的只是使用parseInt()在返回的结果。（fract在来源中搜索。）
If that is not satisfactory, you may try the following:
如果不满意，您可以尝试以下方法：
- render the primary table with "visibility:hidden" by default so that it is laid out but not displayed
- measure the cell heights from jQuery
- round the heights to the nearest integer value in the primary tableand apply as an inline style (rounding up may be a good idea to ensure that cells don't cut contents by 1px)
- render the secondary table based on these integer values and restore visibility of primary table
- 默认情况下使用“visibility:hidden”渲染主表，使其布局但不显示
- 从 jQuery 测量单元格高度
- 将高度四舍五入到主表中最接近的整数值并作为内联样式应用（向上舍入可能是一个好主意，以确保单元格不会将内容剪切 1px）
- 根据这些整数值呈现辅助表并恢复主表的可见性
It might still occur that the borders are misaligned - this can be the case if the position of the primary and secondary tables are not the same (e.g.: primary top: 123.75px, secondary top: 123px.) In that case, placing the tables in a common container or just repositioning to integer coordinates may help.
仍然可能会发生边框未对齐的情况 - 如果主表和次表的位置不同（例如：主顶部：123.75px，次顶部：123px）。在这种情况下，放置表格在公共容器中或只是重新定位到整数坐标可能会有所帮助。
Good luck...
祝你好运...
Edit: As far as I remember, because of some IE and border-collapseanomalies, I resorted to the (deprecated) cellspacingproperty - that should be placed on the table element into HTML, not CSS - and specified separate borders with a dimension of 0in CSS. I placed the whole table in a div with a nice background-color.
The whole thing had the effect as if the table borders were 1px, collapsed having the color of the background div....
编辑：据我所知，由于一些 IE 和边框折叠异常，我求助于（不推荐使用的）cellspacing属性 - 应该将表格元素放在 HTML 中，而不是 CSS - 并指定尺寸为0in 的单独边框CSS。我将整个表格放在一个具有漂亮背景颜色的 div 中。
整个事情的效果就好像表格边框是 1px，折叠成背景 div 的颜色....
回答by Steven Vachon
Firefox is a piece of crap. Adding a container <div>and running outerHeight()on that fixes the issue.
Firefox 是一个废话。添加一个容器<div>并在其outerHeight()上运行可解决此问题。
回答by Sarfraz
I had the similar problem, that seems to be a bug although i am not 100% sure. If for example, a certain element has padding, the innerHeight()didn't show the same result in Webkit and Firefox. As temporary fix, I used both innerHeight()as well as height()to get the right height for that element.
我有类似的问题，这似乎是一个错误，尽管我不是 100% 确定。例如，如果某个元素具有padding，则innerHeight()在 Webkit 和 Firefox 中不会显示相同的结果。作为临时修复，我同时使用innerHeight()和height()来获得该元素的正确高度。
Similarly, I wasn't able to use the height()to show the same across browsers (IE and others). I used something like this that worked across browsers:
同样，我无法使用height()跨浏览器（IE 和其他浏览器）显示相同内容。我使用了这样的东西，可以跨浏览器工作：
$("#element").css('height', '100');
See also innerHeight()and outerHeight()when you want to include padding / borders / margins.
另请参阅innerHeight()以及outerHeight()何时要包含填充/边框/边距。
