列表视图模板不适用于 Firefox

Question

我用 Listview 制作了一个网络表单页面。它在 Chrome 中工作正常，但在 Firefox 中不工作。我确定这不是 CSS 的错。知道为什么会这样吗？

我的索引页代码：

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" GroupItemCount="2" DataKeyNames="ID" OnItemDataBound="ListView1_ItemDataBound">
        <AlternatingItemTemplate>
            <td runat="server" style="background-color: rgba(255, 255, 255, 0.75); width: 405px; height: 200px; text-align: left; vertical-align: top; padding: 10px 10px; display: inline-block; margin: 5px 0px 5px 5px;">
                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("ID", "~/news.aspx?id={0}") %>' Text='<%# Eval("tytul", "{0}") %>'></asp:HyperLink>
                <br />
                <asp:Label ID="dataLabel" runat="server" Text='<%# Eval("data") %>' />
                <br />
                <br />
                <asp:Image ID="Image3" runat="server" ImageUrl='<%# Eval("image", "{0}") %>' Height="100px" Width="100px" Visible='<%# Eval("image")!=DBNull.Value %>' style="float:left; margin-left:0px; margin-right: 5px;"/>
                <asp:Label ID="trescLabel" runat="server" Text='<%# Eval("tresc") %>' CssClass="contenttext"/>
                <br />
            </td>
        </AlternatingItemTemplate>
        <EditItemTemplate>
            <td runat="server" style="">ID:
                <asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' />
                <br />
                tytul:
                <asp:TextBox ID="tytulTextBox" runat="server" Text='<%# Bind("tytul") %>' />
                <br />tresc:
                <asp:TextBox ID="trescTextBox" runat="server" Text='<%# Bind("tresc") %>' />
                <br />data:
                <asp:TextBox ID="dataTextBox" runat="server" Text='<%# Bind("data") %>' />
                <br />image:
                <asp:TextBox ID="imageTextBox" runat="server" Text='<%# Bind("image") %>' />
                <br />
                <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" />
                <br />
                <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" />
                <br /></td>
        </EditItemTemplate>
        <EmptyDataTemplate>
            <table runat="server" style="">
                <tr>
                    <td>No data was returned.</td>
                </tr>
            </table>
        </EmptyDataTemplate>
        <EmptyItemTemplate>
<td runat="server" />
        </EmptyItemTemplate>
        <GroupTemplate>
            <tr id="itemPlaceholderContainer" runat="server">
                <td id="itemPlaceholder" runat="server"></td>
            </tr>
        </GroupTemplate>
        <InsertItemTemplate>
            <td runat="server" style="">tytul:
                <asp:TextBox ID="tytulTextBox" runat="server" Text='<%# Bind("tytul") %>' />
                <br />tresc:
                <asp:TextBox ID="trescTextBox" runat="server" Text='<%# Bind("tresc") %>' />
                <br />data:
                <asp:TextBox ID="dataTextBox" runat="server" Text='<%# Bind("data") %>' />
                <br />image:
                <asp:TextBox ID="imageTextBox" runat="server" Text='<%# Bind("image") %>' />
                <br />
                <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="Insert" />
                <br />
                <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Clear" />
                <br /></td>
        </InsertItemTemplate>
        <ItemTemplate>
            <td runat="server" style="background-color: rgba(255, 255, 255, 0.75); width: 405px; height: 200px; text-align: left; vertical-align: top; padding: 10px 10px; display: inline-block; margin: 5px 5px 5px 5px;">
                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("ID", "~/news.aspx?id={0}") %>' Text='<%# Eval("tytul", "{0}") %>'></asp:HyperLink>
                <br />
                <asp:Label ID="dataLabel" runat="server" Text='<%# Eval("data") %>'></asp:Label>
                <br />
                <br />
                <asp:Image ID="Image3" runat="server" ImageUrl='<%# Eval("image", "{0}") %>' Width="100px" Height="100px" Visible='<%# Eval("image")!=DBNull.Value %>' style="float:left; margin-left:0px; margin-right: 5px;"/>
                <asp:Label ID="trescLabel" runat="server" Text='<%# Eval("tresc") %>' CssClass="contenttext" />
                </td>
        </ItemTemplate>
        <LayoutTemplate>
            <table runat="server">
                <tr runat="server">
                    <td runat="server">
                        <table id="groupPlaceholderContainer" runat="server" border="0" style="">
                            <tr id="groupPlaceholder" runat="server">
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr runat="server">
                    <td runat="server" style="background-color: rgba(255, 255, 255, 0.75); width: 860px; height: 25px; display: block; margin: 0px 8px 0px 8px; text-align: center; padding-top: 10px;">
                        <asp:DataPager ID="DataPager1" runat="server" PageSize="4">
                            <Fields>
                                <asp:NumericPagerField />
                            </Fields>
                        </asp:DataPager>
                    </td>
                </tr>
            </table>
        </LayoutTemplate>
        <SelectedItemTemplate>
            <td runat="server" style="">ID:
                <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
                <br />tytul:
                <asp:Label ID="tytulLabel" runat="server" Text='<%# Eval("tytul") %>' />
                <br />tresc:
                <asp:Label ID="trescLabel" runat="server" Text='<%# Eval("tresc") %>' />
                <br />data:
                <asp:Label ID="dataLabel" runat="server" Text='<%# Eval("data") %>' />
                <br />image:
                <asp:Label ID="imageLabel" runat="server" Text='<%# Eval("image") %>' />
                <br />
            </td>
        </SelectedItemTemplate>
</asp:ListView>

在Chrome中查看（正确）：

在 Firefox 中查看：

Answer 1

Asp.Net 服务器呈现并因此发送到任何浏览器的最终 HTML 将是相同的。

这里 layout/display 的不同可能是因为不同的浏览器解释相同 HTML 的方式不同。

在您的 <LayoutTemplate> 中使用 Table，Firefox 会出现一些奇怪的行为，尤其是 Padding。

检查此 post：Table Differences: Chrome vs Firefox

最后一点，避免使用表格进行布局。除了降低可访问性和许多其他因素之外，它们不再适用于 SEO 目的。检查这个 Link.

列表视图模板不适用于 Firefox

Listview template doesn't work on Firefox

asp.net

firefox

templates

listview

google-chrome