Bug in jQuery outerWidth
outerWidth should calculate as a decimal but it calculates as an integer.
HTML
<div id="x">
<div>
Test<br />
</div>
</div>
CSS
#x {
position: relative;
height: 300px;
width: 300px;
background-color: rgba(255,255, 0,0.3);
font: 13px Arial;
}
#x div {
position: absolute;
background-color: rgba(0, 255, 255, 0.3);
}
.wrong {
color: firebrick;
text-decoration: underline;
}
JavaScript
var innerDiv = $("#x div");
var css = {
top: 25.25,
left: 75.75,
height: 225.25,
width: 175.75
};
innerDiv.css(css);
var msg = "<br />Left: <b>";
msg += innerDiv.position().left;
msg += "px</b><br />Outer Width: <b class='wrong'>";
msg += innerDiv.outerWidth();
msg += "px</b><br />";
msg += "<br />Calc Left: <b>";
msg += css.left;
msg += "px</b><br />Calc Outer Width: <b class='wrong'>";
msg += css.width;
msg += "px</b><br />";
msg += "<br />Top: <b>";
msg += innerDiv.position().top;
msg += "px</b><br />Outer Height: <b class='wrong'>";
msg += innerDiv.outerHeight();
msg += "px</b><br />";
msg += "<br />Calc Top: <b>";
msg += css.top;
msg += "px</b><br />Calc Outer Height: <b class='wrong'>";
msg += css.height;
msg += "px</b><br />";
innerDiv.html(innerDiv.html() + msg);