Infinite loop in IE8 release candidate 1 with modal jQuery UI dialog if DOCTYPE is specified as XHTML 1.1

Infinite loop in IE8 release candidate 1 with modal jQuery UI dialog if DOCTYPE is specified as XHTML 1.1


Hello,
First, thanks to everyone who has worked on this project. It is an
incredible resource and I'm extremely appreciative of all of the hard
work.
That said... <grin>
I have been working with modal dialogs just fine using jQuery 1.3.1
and rc6 of jQuery UI. I'm pretty early stage in a UI redesign for our
application so I'm testing the heck out of things on multiple browsers
(IE6, IE7, IE8 beta2, FF 2, FF 3, Chrome, Opera 9.6, Safari) on
multiple platforms (Windows, Mac, Linux) and everything was just fine.
I upgraded to release candidate 1 of IE 8 yesterday and have been
stuck in modal dialog hell.
Basically, if I have no doctype, everything works fine. If I have an
XHTML 1.1 doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
I immediately go into an infinite loop in IE looping through code in
jQuery 1.3.1. Specifically I seem to be hanging up trying to
calculate the browser page's X and Y (line 2622 of jquery-1.3.1.js):
        // Calculate pageX/Y if missing and clientX/Y available
        if ( event.pageX == null && event.clientX != null ) {
            var doc = document.documentElement, body = document.body;
            event.pageX = event.clientX + (doc && doc.scrollLeft || body &&
body.scrollLeft || 0) - (doc.clientLeft || 0);
            event.pageY = event.clientY + (doc && doc.scrollTop || body &&
body.scrollTop || 0) - (doc.clientTop || 0);
        }
If I take the doctype off, everything works just fine. For fun, here
is my test.html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/include/ui.all.css"></
link>
</head>
<BODY>
<script type="text/javascript" src="/include/jquery-1.3.1.js"></
script>
<script type="text/javascript" src="/include/jquery.ui.all.js"></
script>
<script>
$(document).ready(function() {
        // Initialize the dialog
$("#dialog").dialog({
autoOpen: false,
bgiframe: true,
width: 400,
height: 400,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Save': function() {
saveForm();
$(this).dialog('close');
}
}
});
// Process the add button
$('#add').click(function() {
            $("#dialog").css("visibility", "visible");
            $("#dialog").dialog("open");
            return false;
});
});
</script>
    Press the button<p />
    <input id="add" type="button" Value="Go" />
    <div id="dialog" style="visibility:hidden">
        <label for="field1">Field 1:</label><input type="text" id="field1" /