web-dev-qa-db-ja.com

Internet Explorer 9がテーブルセルを適切にレンダリングしない

私のウェブサイトは常にIE8、IE7、FF、ChromeおよびSafariでスムーズに実行されています。現在、IE9でテストしていますが、奇妙な問題が発生しています。正しくレンダリングされません。

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

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

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

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

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

ページを（画像とともに）保存し、IE9でローカルで開こうとしましたが、問題は発生しません。 （もちろん、私はすべてのテーブル構造をチェックし、それは大丈夫です。ヘッダーとすべての行は、必要に応じて正しい数のcolspanで、同じ数のTDを持っています）。

jqueryasp.netinternet-explorer-9html-table
115
fgpx78

enter image description here私もまったく同じ問題を抱えています。これを読むことをお勧めします https://connect.Microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

Htmlがajaxから返された場合、javascriptを使用してtd間のスペースを削除できます。応答からHTMLを置き換えるには、

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

Jqueryテンプレートを使用してテーブルにデータを取り込むのとまったく同じ問題がありました。 IE9でのみ、より大きなデータセット（300以上）で「ゴースト」<td>を保持し続けました。これらの<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>
33
Jorge

@Shanisonが提供する解決策は部分的にしか役立ちませんが、thead、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プラグインを介してのみ使用できます。代わりに機能検出を使用してみてください。

14
Ravi

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

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);
11
Will Liska

私もこの問題にぶつかりました。<td>要素にテキストを直接挿入しているときに発生することに気付きました。標準かどうかはわかりませんが、<span>要素でテキストをラップすると、レンダリングの問題はなくなりました。

代わりに：

<td>gibberish</td>

試してください：

<td><span>gibberish</span></td>
2
user1207607

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

幅属性 in td/thタグがこの問題を引き起こしていることに気づきました。

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

2
TAURI

レンダリング中にhtmlテーブルに不要なセルを防ぐために、非常に便利なスクリプトが見つかりました。

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

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

2
Rish

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

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

2
Dan Sorensen

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

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

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

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

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

1
anneleenw

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;
}
0
Homer

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

0
Vikas Pawar

ダイナミックテーブルをレンダリングするときに、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 chrome safari ...

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

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

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

0
Arun Pratap Singh

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

AJAX呼び出しからの部分ビューのレンダリングによって作成されたテーブルを表示しています。ここに投稿されたメソッド： 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秒もかかりません。これは私の目的には十分です。

0
Tom Regan