What exactly does the width() function get?
Hi, I just found that the value returned by the width function in
JQuery is different from the one returned by yui. Here is my testcase
////////////////////////////////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Tempate</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<style type="text/css">
table {
table-layout: fixed;
border-collapse: collapse;
border: solid 3px black;
}
td {
border: solid 1px red;
padding: 0;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="utilities.js"></script>
<script type="text/javascript">
function getFullWidth(el) {
var region = YAHOO.util.Dom.getRegion(el);
return region.right - region.left;
}
$(function(){
var table = $('table').get(0);
alert($(table).width());
alert(getFullWidth(table));
});
</script>
</head>
<body>
<table id="TABLE_0">
<colgroup>
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
</colgroup>
<tbody>
<tr style="height: 35px">
<td id="yui-gen5"></td>
<td id="yui-gen6"></td>
<td id="yui-gen7"></td>
<td id="yui-gen8"></td>
<td id="yui-gen9"></td>
<td id="yui-gen10"></td>
</tr>
<tr style="height: 35px">
<td id="yui-gen11"></td>
<td id="yui-gen12"></td>
<td id="yui-gen13"></td>
<td id="yui-gen14"></td>
<td id="yui-gen15"></td>
<td id="yui-gen16"></td>
</tr>
<tr style="height: 35px">
<td id="yui-gen17"></td>
<td id="yui-gen18"></td>
<td id="yui-gen19"></td>
<td id="yui-gen20"></td>
<td id="yui-gen21"></td>
<td id="yui-gen22"></td>
</tr>
<tr style="height: 35px">
<td id="yui-gen23"></td>
<td id="yui-gen24"></td>
<td id="yui-gen25"></td>
<td id="yui-gen26"></td>
<td id="yui-gen27"></td>
<td id="yui-gen28"></td>
</tr>
<tr style="height: 35px">
<td id="yui-gen29"></td>
<td id="yui-gen30"></td>
<td id="yui-gen31"></td>
<td id="yui-gen32"></td>
<td id="yui-gen33"></td>
<td id="yui-gen34"></td>
</tr>
</tbody>
</table>
</body>
</html>
////////////////////////////////////////
In Firefox, the width returned by jquery is the same as the one
returned by yui, but in IE6, opera and Safari, they are different.
Then I measured the visual width(including border), and yui is
correct. So I don't know what exactly jquery's width function
returns.
And there's a weirder problem, you may not notice. This table in my
testcase has a border of 3px width, but in firefox, the border you see
is 1px (in fact it's still 3px, you can see it in dom inspector ). And
if you comment out the line "alert($(table).width());", everything is
ok again. Commentting out the line 'alert(getFullWidth(table));' won't
help. It seems that jquery's width function activate a bug in Firefox.
All the libraries and browsers I'm using are of the latest version,
hope someone can give me some answer, thanks