admin管理员组文章数量:1202004
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(".jpg");" class="item-thumb-image">
<img src=".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(".jpg");" class="item-thumb-image">
<img src=".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(".jpg");" class="item-thumb-image">
<img src=".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(".jpg");" class="item-thumb-image">
<img src=".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(".jpg");" class="item-thumb-image">
<img src=".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 .png
Firefox: alt text .png
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
Share Improve this question edited Jul 30, 2010 at 5:39 Jordan Sitkin asked Jul 29, 2010 at 22:16 Jordan SitkinJordan Sitkin 2,3433 gold badges26 silver badges35 bronze badges 8 | Show 3 more comments4 Answers
Reset to default 13 +50Firefox 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.
As it influences positions as well as dimensions, some people ended up using clientWidth instead of jQuery's 'innerWidth()', while some just use parseInt() on the returned results.
(Search for fract in the sources.)
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 table and 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
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.
Good luck...
Edit: As far as I remember, because of some IE and border-collapse anomalies, I resorted to the (deprecated) cellspacing property - that should be placed on the table element into HTML, not CSS - and specified separate borders with a dimension of 0 in 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....
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...)
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.
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:
$("#element").css('height', '100');
See also innerHeight() and outerHeight() when you want to include padding / borders / margins.
Firefox is a piece of crap. Adding a container <div> and running outerHeight() on that fixes the issue.
本文标签：
版权声明：本文标题：javascript - jQuery returning different heights for the same objects in WebKit (chrome) and Firefox - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738626748a2103510.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
cellpaddingandborder-collapse? Also if you can post the minimal html and jQuery code to reproduce the problem, that always helps... =) – David Thomas Commented Jul 29, 2010 at 22:18border-collapse: 0is invalid. The available options forborder-collapseareinherit,collapseandseparate. (reference: w3.org/TR/CSS2/tables.html#borders) – David Thomas Commented Jul 30, 2010 at 1:11