asp.net - Web 窗体 GridView 在 IE 以外的浏览器中无法正确显示
问题描述
我正在尝试更新一个摇摇晃晃的旧 ASP.NET Web 窗体应用程序以在现代浏览器上工作（我们的商店多年来只在 IE 中支持它）。
在我遇到的其他问题中，我无法让 GridViews 在应用程序的几个部分中正确显示。特别是，列标题的宽度设置不正确，扭曲了整个网格。
在 IE 中，网格如下所示：
而在 Chrome、Firefox 等中，我得到了这个：
请注意扭曲的帐户编号标题大小，以及数据输入单元格如何与列标题的其余部分不对齐（帐户标题、财政年度...）
我认为这是某种简单的 CSS 问题，但我所做的任何更改都没有在现代浏览器中产生任何影响——即使我尝试在 DOM 浏览器中内联编辑样式，它们也不会响应。
奇怪的是，列标题在 .aspx 中被赋予了 ItemStyle-Width 和 ItemStyle-CssClass 属性，但据我所知，这些似乎根本没有反映在生成的 HTML 标记中。
我确实看到这些单元格在 IE 的标记中而不是在现代浏览器中给出了“colSpan='1'”和“rowSpan='1'”属性，所以似乎 IE 正在以不同的方式解释 .NET 发送它的内容（说的很明显，我猜）。不过，我不知道这些属性的确切含义，因为我从未见过它们用驼色外壳写成那样。我也找不到/不明白这些属性在代码中的来源......也许这只是控件呈现方式中的某种东西。
这是图中整个 gridview 的 .aspx。请让我知道是否还有其他帮助。
<div id="dvByFund" style= "width: 100%;">
<asp:GridView
runat="server"
id="grdCashReceiptsByFund"
AutoGenerateColumns="False"
Width="100%"
RowStyle-CssClass="GridListItem"
AlternatingRowStyle-CssClass="GridListItemAlt"
HeaderStyle-CssClass="GridListItemAlt"
OnRowDataBound="grdCashReceiptsByFund_RowDataBound"
ShowFooter="True"
CellPadding="2"
>
<Columns>
<asp:TemplateField ItemStyle-CssClass="invisible" HeaderStyle-CssClass="invisible" FooterStyle-CssClass="invisible">
<ItemTemplate>
<asp:label runat="server" id="lblGovernmentalLevel" />
<asp:label runat="server" id="lblGovernmentalLevelDescription" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Account #" ItemStyle-Width="50px" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtFundNumber" Width="35px" CssClass="Normal" onblur="verifyFundExists(this);" MaxLength="3" onchange="formChanged=true;" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Account Title" ItemStyle-Width="230px" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:Label runat="server" id="lblFundDescription" Width="210px" CssClass="ReadonlyLabelNoBorder" />
<asp:TextBox runat="server" id="txtFundDescription" CssClass="invisible" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Major<br /> Source" ItemStyle-Width="50px" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtMajorSource" Width="35px" CssClass="Normal" MaxLength="2" onchange="formChanged=true;" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Source" ItemStyle-Width="50px" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtSource" Width="35px" CssClass="Normal" MaxLength="2" onchange="formChanged=true;" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Type" ItemStyle-Width="100px" FooterStyle-HorizontalAlign="Right" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:DropDownList id="ddlAppropriationType" CssClass="Normal" runat="server" DataValueField="key" DataTextField="value" onchange="formChanged=true;" />
</ItemTemplate>
<FooterTemplate>
Totals:
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Right" ItemStyle-Width="90px" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtFirstSessionYear" total="dvFundFirstSessionYearTotal" onchange="amountChanged(this);" onkeypress="FormatForAmount(11, '0', this);" onfocus="subtractFromTotal(this);amountFocused(this);" Width="90px" CssClass="NormalAmountNoBorder" onblur="amountBlurred(this);" />
</ItemTemplate>
<FooterTemplate>
<div id="dvFundFirstSessionYearTotal" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Right" ItemStyle-Width="90px" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtSecondSessionYear" total="dvFundSecondSessionYear" onchange="amountChanged(this);" onkeypress="FormatForAmount(11, '0', this);" onfocus="subtractFromTotal(this);amountFocused(this);" Width="90px" CssClass="NormalAmountNoBorder" onblur="amountBlurred(this);" />
</ItemTemplate>
<FooterTemplate>
<div id="dvFundSecondSessionYear" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Right" ItemStyle-Width="90px" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtThirdSessionYear" total="dvFundThirdSessionYear" onchange="amountChanged(this);" onkeypress="FormatForAmount(11, '0', this);" onfocus="subtractFromTotal(this);amountFocused(this);" Width="90px" CssClass="NormalAmountNoBorder" onblur="amountBlurred(this);" />
</ItemTemplate>
<FooterTemplate>
<div id="dvFundThirdSessionYear" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Right" ItemStyle-Width="90px" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtFourthSessionYear" total="dvFundFourthSessionYear" onchange="amountChanged(this);" onkeypress="FormatForAmount(11, '0', this);" onfocus="subtractFromTotal(this);amountFocused(this);" Width="90px" CssClass="NormalAmountNoBorder" onblur="amountBlurred(this);" />
</ItemTemplate>
<FooterTemplate>
<div id="dvFundFourthSessionYear" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Right" ItemStyle-Width="90px" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtFifthSessionYear" total="dvFundFifthSessionYear" onchange="amountChanged(this);" onkeypress="FormatForAmount(11, '0', this);" onfocus="subtractFromTotal(this);amountFocused(this);" Width="90px" CssClass="NormalAmountNoBorder" onblur="amountBlurred(this);" />
</ItemTemplate>
<FooterTemplate>
<div id="dvFundFifthSessionYear" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Right" ItemStyle-Width="90px" FooterStyle-HorizontalAlign="Right" FooterStyle-Font-Bold="true" ItemStyle-CssClass="AmountCell">
<ItemTemplate>
<asp:TextBox runat="server" id="txtSixthSessionYear" total="dvFundSixthSessionYear" onchange="amountChanged(this);" onkeypress="FormatForAmount(11, '0', this);" onfocus="subtractFromTotal(this);amountFocused(this);" Width="90px" CssClass="NormalAmountNoBorder" onblur="amountBlurred(this);" />
</ItemTemplate>
<FooterTemplate>
<div id="dvFundSixthSessionYear" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button id="btnAddByFundRow" runat="server" Text="Add Row" OnClientClick="addByFundRow(); return false;" class="CommandButton" />
</div>
应用于 AmountCell 类的 CSS：
.AmountCell
{
border: solid 1px silver;
}
当我从所有 TemplateFields 中删除 ItemStyle-Width 和 ItemSytle-CssClass 属性时，出现了一个奇怪的错误：
基本上，预期的结果：这个 gridview 在浏览器中看起来是一样的（在 IE 中出现的方式，列与其标题正确对齐）。
实际结果：IE 看起来不错，Chrome/Firefox 看起来失真。
我不是 Web 表单如何工作的最重要的专家（从长远来看），因此非常感谢任何帮助。谢谢！
更新：在使用开发工具一段时间后，我了解到生成的 .html 标记包含 GridView 的每个行元素的内联样式：
style="display:block;"
从 tr 元素中消除这种内联样式会将行的列重新调整为正确的对齐方式。
问题是，我仍然不知道如何在代码中摆脱它......它似乎不是明确添加的东西，而只是融入了 asp.net 控件。
再次，非常感谢任何和所有的见解！
解决方案
推荐阅读
- rust - 是否可以将 Self 限制为 trait 中的单元结构？
- javascript - 将 JavaScript 表值获取到 c#
- vb.net - 需要在远程计算机上获取默认程序关联
- node.js - 我怎样才能在阿多尼斯的关系中取得进展？
- c - c编程中具有函数递归的nxn矩阵的行列式
- micronaut - Cloud Run 上的错误 micronaut 完全托管 - setsockopt ， RoutingInBoundHandler
- r - 在 R 中求解单个 ODE
- amazon-web-services - 运行放大模拟时无法访问 DynamoDB 主机
- javascript - 如何将选中/未选中复选框的值捕获/控制台到角度 7 中的对象数组中
- python - 在 Django 中按类别添加产品而不使用 form.py