7

本当に奇妙なもの、これ。

次のように、を使用しasp:Repeaterて HTML テーブルを作成しています。

マークアップ:

<asp:Repeater ID="myRpt" runat="server">
    <HeaderTemplate>
        <table id="myGrd" border="0" style="cursor:pointer;width:100%;  background-color:white;" cellpadding="2" cellspacing="0">
            <tbody>
    </HeaderTemplate>
    <ItemTemplate>
        <tr onclick="criteria.rowClicked(this);">
            <td style="border:solid 1px black;">
                <asp:Literal ID="lblName" runat="server"></asp:Literal>
            </td>
            <td style="border:solid 1px black;width:200px;">
                <asp:Literal ID="lblRange" runat="server"></asp:Literal>
            </td>

            <td style="display:none;" >
                <asp:Literal ID="lblMisc" runat="server"></asp:Literal>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody> </table>
    </FooterTemplate>
</asp:Repeater>

VB:

    Public Sub populateGrid(ByVal ds As DataSet)
        'ds is just made from a simple select query
        myRpt.DataSource = ds
        myRpt.DataBind()
    End Sub

 Private Sub myRpt_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles myRpt.ItemDataBound
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            Dim lblName As Literal = e.Item.FindControl("lblName")
            Dim lblRange As Literal = e.Item.FindControl("lblRange")
            Dim lblMisc As Literal = e.Item.FindControl("lblMisc")

            lblName.Text = "<font style='font-size:10pt; font-family:arial;'>" & Trim(e.Item.DataItem("Name")) & "</font>"
            lblRange.Text = "<font style='font-size:10pt; font-family:arial;'>" & Trim(e.Item.DataItem("Range")) & "</font>"
            lblMisc.Text = "<font style='font-size:10pt; font-family:arial;'>" & Trim(e.Item.DataItem("Miscellaneous")) & "</font>"
        End If
    End Sub

これは Firefox と Chrome では正常に表示され、ほとんどの場合 IE で表示されます。ただし、大きなテーブル (50 行以上) の場合、IE の動作がおかしくなることがあります。空白のセルを追加するように見えます...

ここに画像の説明を入力

...しかし、HTML には何もありません。開発者ツールを使用して確認しました。正しくない行には、セル テキストを除いて、正しい行と同じマークアップがあります。さらに、間違った行を削除すると、その上の行が代わりに間違って表示され始めます。

なぜIEがこのようにレンダリングしているのか、それを止めるために何ができるのか、誰かが提案してください。

4

3 に答える 3

11

これは、大きなテーブルのレンダリングに関する IE9 の既知のバグのようです。テーブル定義の開始タグと終了タグの間の空白を削除すると、問題が解決されました。</td><td>

IE 9 レンダリングに関する MSDN の議論

于 2012-08-31T16:56:02.127 に答える
3

これは既知の IE9 の問題です。次のコードを HTML ページのどこかに配置することでこれを修正できます。

$(function() {
    var browser = $.browser;
    if ( browser.msie && browser.version.slice(0,3) == "9.0" ) {
        $('table').each(function(index) {
                var replace = $(this).html().replace(/td>\s+<td/g,'td><td'); 
                $(this).html(replace);
        });
    }
});
于 2012-09-24T20:06:50.763 に答える
-2

Click イベントが発生すると拡大する巨大なテーブルがありました。IE9でのみ発生し、IE8、IE10、Chromeなどではすべて問題ありませんでした.

上記の解決策は、同じ種類の他の回答と同様に、私には失敗しました。

私はこのように解決しました：

表に境界線を追加したところ、HTML が正しくないことが明らかになりました。一部のコルスパンが欠落しているか、セルが必要であるか、&nbsp;または何でもあった可能性があります。

border=1また、tables属性を使用すると、Click-expanding の問題が解消されたことにも気付きました。

そこで、クラスxltableをテーブルに置き.xltable td {border:0px solid white;}、css を入れました。

私のコードはまだ「有効」ではありませんが、機能します。

于 2014-10-23T18:55:13.280 に答える