IE8 forces compatibility mode when inserting data into a div

问题

I've been fighting against IE8's compatibility mode all day and I'm about to chuck a brick at it.

I have some code, which uses jquery 1.2 (yes it's old - can't change that), to search for some records in our web app. The results of the search can be clicked on to view the contents of the record (by using .animate() it opens a space under the row and creates another TR underneath and inserts HTML data from a json feed).

In IE8, clicking on a result to view the content forces it to reload in compatibility mode, where it works fine in all other browsers (IE7, FF3.0+, Chrome, Safari). I've been trying to use IE8's developer toolbar to debug and track down why this is happening but I've not been able to find any error or any evidence of what might be causing it.

Code that shows preview:

// Code that binds a click to open the result preview:
var _tr = $('<tr class="outline" id=' + val.assessment.assessmentId + '></tr>').bind("click", msi.reuseAssessment.preview);

...

// in msi.reuseAssessment.preview()
var url = "/direct/msi-assessment/" + assessmentId + "/assessmentHtml.json?no-cache=true";
jQuery.ajax({
    type: "GET",
    url: url,
    dataType: "json",
    success: function(d, textStatus){
        var _content = d.assessmentHtml;
        var _preview = $("<tr id=" + assessmentId + "></tr>");

        // loadContent 
        _tr.after(_preview.animate({
            height: 50
        }, 500, 0, function() {
            msi.reuseAssessment.drawPreview(this, _content); // Puts the content from the json into a td
        }));
    },
    error: function(xmlHttpReq, status, errorThrown) {
        // display error msg
    }
});

Stepping through the code using IE8's developer tools, it gets passed here and into somewhere into jQuery's code and that's when it refreshes in compatibility mode. I've validated the JSON, the HTML code that comes out with w3c and it's all fine, I'm really at a loss as to what's happening.

Does anyone know how I might better track down what's causing it, or should I just force IE7 mode on these pages?

Edit: The search is performed in an ajax 'popup' that appears over the top of the screen. It's template (base HTML) is loaded from a separate HTML file, and injected into a div at the bottom of the original page. This means there would be nested HTML files (with <html></html> tags etc). Would this affect it also?
Edit 3: removing these duplicate tags did not fix the problem.

Edit 2: Still haven't solved this. Is it just one of those things that IE8 won't display properly and put it down to browser quirk? I would really appreciate some help on this.

回答1:

By forces it to reload in compatibility mode do you mean that you get a flyout balloon notification that says something like: "Internet Explorer encountered a problem with this page and has loaded it in compatibility mode"?

If so, that means you've hit a bug in IE. Called a "Hard assert" it means that the layout engine crashed (not an AV or anything exciting, it just got into an unrecoverable state) and thus IE tries to provide the user with some content by using the older layout engine.

If the problem still occurs in IE9, please file a bug at http://connect.microsoft.com/ie

thanks!

回答2:

Have you ensured your DOCTYPE and X-UA-Compatible are correct

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And add this just after the <head>

<meta http-equiv="X-UA-Compatible" content="IE=8">

回答3:

After a colleague did some searching as well, we found this here on SO, where it's been confirmed that max-height is causing a hard assert in IE8, confirming that it is, indeed, a bug in IE8 as EricLaw posted.

We were using max-height for the style of the div we were inserting the content into, and in turn, causing the hard assert. The above linked question has a work around for anyone else encountering this problem.

来源：https://stackoverflow.com/questions/3614286/ie8-forces-compatibility-mode-when-inserting-data-into-a-div

标签

jquery

internet-explorer-8

ie-developer-tools

jquery-animate

ie8-compatibility-mode