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

我被这个困惑了。

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：

 辅助表格HTML： 
 
 
 
 
 70609 
 
 
 
  
 
 
 
 
 R1000 Armoire 
 
 Casegoods  
 
 
 
 
 70634 
 
 
 
  
 
 
 
 
 C1124 Nightstand 
 
 Casegoods  
 
 
 
 
 70642 
 
 
 
  
 
 
 
 
 999 Nice Table New Name 
 
 Casegoods  
 
 
 
 
 70643 
 
 
 
  
 
 
 
 
 OC603 Coffee Table 
 
 Casegoods  
 
 
 
 
 70644 
 
 
 
  
 
 
 
 
 OC606 Coffee Table 
 
 Casegoods  
 
 
 
 

 
 
 
 
 
   
 Sent 2 days ago 
 
 
 
 
   
 
 
 
 
 
 
   
 
 
 
   
 $90.00 
 
 
 
 
 
 
 
   
 Sent 2 days ago 
 
 
 
 
   
 
 
 
 
 
 
   
 Sent 2 days ago 
 
 
 
 
   
 
 
 
 
 
 
   
 
 
 
   
 
 
 
 
 

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业务：

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

这就是Chrome中的样子： 替代文字http://dl.dropbox.com/u/5536259/chromeSpacing.png

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

Answer 1

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

Answer 2

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

由于它影响位置和尺寸，有些人最终使用clientWidth而不是jQuery的’innerWidth（）’ ，而有些人只是在返回的结果上使用parseInt() 。 （搜索来源中的fract 。）

如果不满意，您可以尝试以下方法：

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

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

祝好运…

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

Answer 3

我有类似的问题，这似乎是一个错误，虽然我不是100％肯定。 例如，如果某个元素有填充 ，则innerHeight()在Webkit和Firefox中没有显示相同的结果。 作为临时修复，我使用innerHeight()和height()来获得该元素的正确高度。

同样，我无法使用height()在浏览器（IE和其他）中显示相同的内容。 我在浏览器中使用了类似的东西：

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

如果要包含填充/边框/边距，请参阅innerHeight()和outerHeight() 。

Answer 4

Firefox是一块垃圾。 添加容器

并在其上运行outerHeight()可以解决问题。