Why does jQuery.css('width') return different values in different browsers? -
i've written jquery code reads width of columns in table , applies them table.
on page, there table this:
<table style='table-layout:fixed;'> <tbody id='mytablebody'> <tr> <td style='width:100px;'>foo</td> <td style='width: 40px;'>bar</td> </tr> </tbody> </table>
i've written following jquery code read css width properties of table:
var colwidths = []; var cells = $('#mytablebody').find('td'); (i = 0; < cells.length; i++) colwidths.push($(cells[i]).css('width'));
after code runs, expect colwidths
[100, 40]
, , in firefox, is. however, in ie8, [92,32]
. breaks page in ie depends on values being correct.
i believe may pertinent table contained within jquery-ui-tabs element, , know jquery-ui css can weird things, wouldn't surprised if has it.
why jquery.css('width') doesn't return value expect in ie8? can it?
jquery normalizes browser handling in situation via $().width()
.
css("width")
different attribute / property not normalized instead retrieves css value element(s). width()
"actual size in dom" doesn't take padding , margins applicable consideration css("width")
retrieves css value. others have mentioned below answer, .outerwidth()
.width()
accomplishes, includes padding , margins represented native browser.
in short:
$(this).width() != $(this).css("width")
a parallel example this:
$(this).css("width")
is closer
$(this).attr("name")
than $(this).width()
or $(this).height()
.
edit:
here tabbed on , saw illustrates difference:
$(this).css("height", "auto"); alert($(this).height());
the alert numeric value (pixels).
Comments
Post a Comment