IE9 table has random rows which are offset at random columns

I have a page of categories, when the user clicks one, the items under that category are loaded via a jQuery Ajax call, in a table, and stuck into an element just below the category. What seems to happen though, is that one or two r开发者_Python百科ows in the loaded table, will have its data offset at a random column. I have tested this in IE9, FF 3.6, and Chrome 13. This ONLY seems to happen in IE9. The tabular data is perfectly formatted - I have used Fiddler to intercept the requests and then looked at the raw html, and there's nothing wrong with it.

The site was built in ASP.NET MVC3. The table that is returned via the Ajax request returns a Razor partial view. This has to work in IE, unfortunately. I'm really hoping someone has an explanation for this.

Here's one example:

And another:

EDIT [2012/03/25]: This application has left my hands, so I am unable to verify which of the answers work. The link that Adam Youngers posted to http://social.msdn.microsoft.com/Forums/pl/iewebdevelopment/thread/e6f49d52-ec3f-47c5-802e-b80d1a58ed39 seemed to have some possible solutions. From past experience, I would try these options first..

1. Adding <meta http-equiv="X-UA-Compatible" content="IE=8" /> to the head element of the page.
2. Attempt to remove any white-space between table cells. Eg. "</td><td>", instead of having the next cell start on a new line. (This has caused strange spacing issues for me in the past)

---

The problem seems to be with white spacing.

I found this answer on http://social.msdn.microsoft.com/Forums/en-AU/iewebdevelopment/thread/28d78780-c95c-4c35-9695-237ebb912d90

Replace the html you get from the AJAX call using a regular expression like this.

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
tableHtml = tableHtml.replace(expr, '><');

---

I used an answer from another post Remove whitespace and line breaks between HTML elements using jQuery where there was a script which was more effective than the one above. I used the answer to solve it, but I will repeat it for a complete answer.

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}

Ultimately, this is only an interim solution and should be fixed in IE9/10 by Microsoft.

---

The solution given @Johann Strydom works but if you do not want to touch every element and just focus on the table content model.

Here is a better regex devised by my Lead at work.

if (jQuery.browser.msie && jQuery.browser.version === '9.0')
{
    data = data.replace(/>\s+(?=<\/?(t|c)[hardfob])/gm,'>');
}

covering all table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th elements.

---

Following Krummelz's suggestions, adding <meta http-equiv="X-UA-Compatible" content="IE=8" /> makes the problem go away.

For my specific problem, I have a jquery datepicker and regular label that renders correctly in IE9 but after a jquery ajax call would get shifted down into the data. Putting the above tag fixes it for me. It is worth a try. Good luck.

---

White spacing was my issue too, though my situation was a little different. This thread helped me fix the issue (Thanks to all).

My table would be fine then randomly add a column out of nowhere after a postback. Here is my code before and after:

Before: (i have about 10 others that are formatted the same way are not causing this issue, but this one was)

<tr>
    <th class="width125px th-left-borders">
        Intangibles
    </th>
    <td><asp:TextBox ID="txtCustFinancial_Intangibles" runat="server" 
            CssClass="textToLabel widthFull textbox_number_align"></asp:TextBox>
    </td>
</tr>

After: (removed the line breaks which are usually fine, but for some reason this was causing an issue)

<tr>
    <th class="width125px th-left-borders">Intangibles</th>
    <td><asp:TextBox ID="txtCustFinancial_Intangibles" runat="server" 
            CssClass="textToLabel widthFull textbox_number_align"></asp:TextBox></td>
</tr>

Hopefully this will help someone as well.