Internet Explorer 9がテーブルセルを正しくレンダリングしない

私のウェブサイトは常にIE8、IE7、FF、Chrome、Safariでスムーズに動作しています。現在、IE9でテストしていますが、奇妙な問題が発生しています。一部のページでは、一部の表形式データが正しく表示されません。

HTMLソースはすべて正しく、ページを更新するたびに問題を示す行が変更されます（実を言うと、問題自体はすべてではなく、一部の更新でのみ表示されます）。

IEのF12ツールを使用すると、テーブル構造が正しく表示されます。M08000007448を含むTDの後に空のTDがあってはなりませんが、このように表示されます。

さらに、F12ツールを使用し、ツールバーの「要素をクリックして選択」ツールで、M08000007448と19の間の空のスペースをクリックしようとすると、「hidden td」ではなくTRが選択されます。

このテーブルレンダリングの問題は、アプリケーションの他のいくつかのテーブルでも発生しています。誰かがこのようなことを経験していますか？IE9でのみ発生します:(

それが重要かどうかはわかりませんが、ページはASPNET（ウェブフォーム）で作成され、Jqueryと他のJSプラグインを使用しています。

ページを（画像付きで）保存し、IE9を使用してローカルで開いてみましたが、問題は発生しません。（もちろん、私はすべてのテーブル構造をチェックしましたが、問題ありません。ヘッダーとすべての行は、実際には同じ数のTDを持ち、必要に応じて正しい数のcolspanを持っています）。

私もまったく同じ問題を抱えています。あなたはこれを読みたいかもしれませんhttps://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

htmlがajaxから返された場合、JavaScriptを使用してtd間のスペースを削除できます。次に、応答から、

response_html = response_html.replace(/td>\s+<td/g,'td><td');
$('#table').html(response_html);

jqueryテンプレートを使用してテーブルにデータを入力するのとまったく同じ問題がありました。<td>IE9でのみ、より大きなデータセット（300以上）で「ゴースト」が発生し続けました。これら<td>は、外側の列をテーブルの境界の外にプッシュします。

私は本当にばかげたことをすることによってこれを修正しました。<td>開始タグと終了タグの間のスペースをすべて削除し、テーブルに関連するHTMLマークアップを左揃えにします。基本的に、すべての<td> </td>行をスペースなしで同じ行に配置します。

例：

<table>
<tr class="grid_customer_normal">
<td>${primary}</td>
<td>${secondary}</td>
<td>${phone}</td>
<td>${address}</td>
</tr>
</table>

@Shanisonの解決策は部分的にしか役立ちませんが、ad、thなどのテーブルコンテンツモデルの一部である可能性がある他の要素の間にスペースがある場合、問題は解決しません。

ここに私のリードが仕事で考案したより良い正規表現があります。

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

すべてのテーブル、キャプション、colgroup、col、tbody、thead、tfoot、tr、td、th要素をカバーします。

注：jQuery.browserはjQuery 1.9で削除され、jQuery.migrateプラグインを介してのみ使用できます。代わりに機能検出を使用してみてください。

空白を削除してこの問題を修正しました：

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
var response_html_fixed = data.replace(expr, '><'); //A disgusting hack for ie9. Removes space between open and close <td> tags
$('#treegrid-data').replaceWith(response_html_fixed);

IE Blogは、Compat Inspectorスクリプトと呼ばれる今日の新しいツールについて言及し、IE 9レンダリングの非互換性のトラブルシューティングを支援します。問題のトラブルシューティングに役立つ場合があります。

http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx

私もその問題を抱えていました。

td / thタグのその幅属性がこの問題の原因であることが私に起こりました。

それをstyle = "width：XXpx"に変更し、問題は解決されました:)

私もこの問題に遭遇し、<td>要素に直接テキストを入力しているときに発生したことに気付きました。標準であるかどうかはわかりませんが、テキストを<span>要素でラップした後、レンダリングの問題が解消されました。

だから代わりに：

<td>gibberish</td>

試してください：

<td><span>gibberish</span></td>

レンダリング中にHTMLテーブル内の不要なセルを防ぐための非常に便利なスクリプトを見つけました。

function removeWhiteSpaces()
{
   $('#myTable').html(function(i, el) {
      return el.replace(/>\s*</g, '><');
   });
}

ページが読み込まれたときに呼び出す必要があるこのJavaScript関数（つまり、onloadイベント）

遅い答えですが、うまくいけば私はこれで誰かを助けることができます。IE9でデバッグするときに同じ問題が発生しました。解決策は、HTMLコードのすべての空白を削除することでした。の代わりに

<tr> <td>...</td> <td>...</td> </tr>

私がしなければなりませんでした

<tr><td>...</td><td>...</td></tr>

これで問題は解決したようです！

これはIE9の非常に深刻なバグです。私の場合、異なるtd間の空白のみを削除することは十分ではなかったので、異なるtr間の空白も削除しました。そして、それはうまく機能しています。

動的テーブルをレンダリングするとき、IE-9で同様の問題がありました。

var table = $('<table><tr><td style="width :100"></td></tr></table>');

レンダリングすると次のように変換されます...

<table><tbody><tr><td style="width :100px"></td></tr></tbody></table>

これはie = 10クロムサファリで完璧に動作します...

 //   but for ie-8 it renders to... with a style attr in my case

 <table><tbody><tr><td ></td></tr></tbody></table>

の100px代わりに書く必要があります100。

ie9で同じフォーマットの問題があり、ie11で新しい問題があります。正しくフォーマットされますが、約400行と9列のテーブルをレンダリングするのに25〜40秒かかります。同じ原因があります。trまたはtdタグ内の空白です。

AJAX呼び出しからの部分ビューのレンダリングによって作成されたテーブルを表示しています。ここに投稿された方法を使用して、レンダリングされた部分ビューから空白を削除することにより、サーバー上でそれをBFHすることにしました：http : //optimizeasp.net/remove-whitespace-from-html

これは完全にコピーされた彼の解決策です：

    private static readonly Regex RegexBetweenTags = new Regex(@">(?! )\s+",     RegexOptions.Compiled);
    private static readonly Regex RegexLineBreaks = new Regex(@"([\n\s])+?(?<= {2,})<", RegexOptions.Compiled);
    private static string RemoveWhitespaceFromHtml(string html)
    {

        html = RegexBetweenTags.Replace(html, ">");
        html = RegexLineBreaks.Replace(html, "<");
        return html.Trim();

    }

そして、ここに別のSOの答えから盗まれた文字列として部分的なビューを返すメソッドがあります：

public string RenderPartialViewToString(string viewName, object model)
    {
        this.ViewData.Model = model;
        try
        {
            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(this.ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(this.ControllerContext, viewResult.View, this.ViewData, this.TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return RemoveWhitespaceFromHtml(sw.ToString());
            }
        }
        catch (Exception ex)
        {
            //logger here
        }
    }

少し時間がかかりますが、約400行のテーブルをレンダリングするのに1秒もかかりません。これは、私の目的には十分です。

Knockoutで生成されたテーブルでこの問題が発生することがありました。私の場合、私はここにあるjQueryソリューションを使用してそれを修正しました

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

IE10のKendoUIグリッドでも同じ問題がありました。このハックで、IEに欠落しているテーブルセルを再レンダリングするように強制することができました。

htmlTableElement.appendChild(document.createTextNode(''));

空のtextNodeを追加すると、IEはテーブル全体を再レンダリングします。