#8443 closed bug (cantfix)
outerWidth(true) returns wrong values in IE9 and Safari
| Reported by: | Owned by: | mikesherov | |
|---|---|---|---|
| Priority: | high | Milestone: | 1.7.2 |
| Component: | dimensions | Version: | 1.5.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
This is the same problem as ticket 3092 - which was closed some time ago. When calculating outerWidth(true) in IE9 and Safari, the value returned is the width + margin implied from the "margin:auto" property Works correctly in IE & Firefox.
The discrepancy happens when
- the outer div is floated,
- the inner div has the width set (smaller than the outer div)
- the inner div has style="margin:auto"
<%@ Page Language="c#" CodeBehind="test1.aspx.cs" AutoEventWireup="True" Inherits="SonicEagle.BrokerAchieve.Errorhandler.test1" %> <!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>test1</title> <script src="/common/jquery/jquery.js" type="text/javascript"></script>
</head> <body>
<div style="border:1px solid red;width:200px;float:left;">
<div style="width: 100px; display: block;border:1px solid blue;margin: 0px auto;" class="xinner" >
inner div
</div>
</div> <input type="button" onclick="test()" /> <div id="results" style="padding-top:30px;"> </div> <script type="text/javascript">
function test() {
$("#results").html('$(".xinner").outerWidth(true): ' + $(".xinner").outerWidth(true));
} $(document).ready(test);
</script>
</body> </html>
Change History (12)
comment:1 Changed 12 years ago by
comment:2 Changed 12 years ago by
| Component: | unfiled → dimensions |
|---|---|
| Priority: | undecided → high |
| Resolution: | → duplicate |
| Status: | new → closed |
comment:4 Changed 12 years ago by
| Resolution: | duplicate |
|---|---|
| Status: | closed → reopened |
comment:5 Changed 12 years ago by
comment:7 Changed 12 years ago by
this seems to be working as expected in Safari 5.1 using this fiddle: http://jsfiddle.net/pyeNX/1/
I don't have IE9 handy, so I can't tell if it's still broken there.
comment:8 Changed 12 years ago by
| Milestone: | 1.next → 1.7.2 |
|---|---|
| Owner: | set to mikesherov |
| Status: | open → assigned |
still borked in IE9. I'm on it.
comment:9 Changed 12 years ago by
For the record here, IE9 is right. See the discussion here for more info: https://bugs.webkit.org/show_bug.cgi?id=73334
I've pinged FF: https://bugzilla.mozilla.org/show_bug.cgi?id=381328 and I'm going to ping Opera about fixing this in their browsers.
comment:10 Changed 12 years ago by
this is now fixed to behave like IE9 in webkit proper: https://bugs.webkit.org/show_bug.cgi?id=73334
comment:11 Changed 11 years ago by
Update: also in touch with Opera to get this resolved: https://twitter.com/#!/mikesherov/status/145180476628410370
comment:12 Changed 11 years ago by
| Resolution: | → cantfix |
|---|---|
| Status: | assigned → closed |
closing this ticket as cantfix as really there is nothing we can do to fix this here. What remains is for FF and Opera to implement the correct behavior as per the spec, and there really is no way to fix this in jQuery.
I've done what I can to advocate for a fix, please continue to advocate for it as well. Thanks for the bug report, please continue to track the issue with the links I provided above!
example at http://jsfiddle.net/pyeNX/1/