Internet Explorer 中的 ASP.NET Gridview 水平对齐答案

【问题标题】：ASP.NET Gridview horizontal alignment in Internet ExplorerInternet Explorer 中的 ASP.NET Gridview 水平对齐
【发布时间】：2010-12-02 08:12:56
【问题描述】：

我正在尝试有一个统一的位置，我可以在其中编辑我的 gridview 列的行为和对齐方式。专门看标题行。我有某些包含文本值的列，那些应该是左对齐的值和标题。其他列包含整数，值和标题都应右对齐。

“第一天”我认为一切都很好，Firefox/Chrome 完全按照需要显示，然后用户来了，发现一切都错了（在他们的资源管理器中）（居中对齐的标题）。

因此，我花了无数小时“和失眠之夜；）”在谷歌上搜索试图找到解决方案，但无济于事。

如何唯一标识一个标题单元格左对齐和另一个标题单元格右对齐？

我找到了 HeaderStyle-CssClass 和 ItemStyle-CssClass（后者在这种特定情况下并不那么有趣）。

问题是每当我在 CSS 文件中定义对齐方式时

.HeaderStyle th { text-align: <value>; }

它取代了可能存在的任何其他设置。记住文本项应该是左对齐，数字右对齐，包括标题。

在有问题的地方加入一个 HeaderStyle-CssClass 是没有问题的，尽管这对于以后的支持和维护来说都是相当麻烦的。正确的解决方案将是定义对齐的单个位置，因为它们应该分别按照设计。这可以通过主题文件夹中的皮肤来完成吗？

用于演示目的

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewAlignments.aspx.cs"
Inherits="GridviewAlignments" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Testing GridView Alignment</title>
    <style type="text/css">
        .LeftAlign
        {
            text-align: Left;
        }
        .NoneAlign
        {
            text-align: none;
        }
        .RightAlign
        {
            text-align: Right;
        }
        .JustifyAlign
        {
            text-align: justify;
        }        
        .InheritAlign
        {
            text-align: inherit;
        }
        .HeaderStyle th
        {
            text-align: justify;
        }    
    </style>  
</head>  
<body>  
    <form runat="server">  
    <asp:GridView runat="server" ID="TestAlign" ShowFooter="True" DataSourceID="testDataSource"
        Width="600" CssClass="HeaderStyle">  
        <Columns>  
            <asp:BoundField DataField="left" HeaderText="-left-"
                HeaderStyle-CssClass="LeftAlign" />  
            <asp:BoundField DataField="none" HeaderText="-none-"
                HeaderStyle-CssClass="InheritAlign" />  
            <asp:BoundField DataField="right" HeaderText="-right"
                HeaderStyle-CssClass="RightAlign" />  
        </Columns>  
    </asp:GridView>  
    <asp:ObjectDataSource ID="testDataSource" runat="server" TypeName="TestData" SelectMethod="GetTestGridData"></asp:ObjectDataSource>  
    </form>  
</body>  
</html>

【问题讨论】：

感谢您的回答。我目前正在努力听取您的意见并提出解决方案。

标签： asp.net css gridview

【解决方案1】：

您是否尝试过使用 HeaderTemplate？

<Columns>
        <asp:TemplateField>
            <HeaderTemplate></HeaderTemplate>
        </asp:TemplateField>
</Columns>

我不太确定，但我认为这样你可以为不同的标题设置不同的类。

【讨论】：

【解决方案2】：

每当我在 CSS 文件中定义对齐方式时

.HeaderStyle th { text-align: <value>; }

它取代了可能存在的任何其他设置。

这是因为选择器 .HeaderStyle th 比 .RightAlign 更“具体”。在 CSS 中，你在选择器中放入的东西越多，它就越“具体”，更具体的规则会覆盖不太具体的规则。你可以在规范中看到exact rules。

如果您将.RightAlign 选择器更改为.HeaderStyle .RightAlign，它现在比.HeaderStyle th 更具体，并且会“获胜”。

另请注意inherit 在 IE 中不起作用。

【讨论】：

【解决方案3】：

您应该使用 GridView 的 HeaderStyle-CssClass 属性，而不是使用绑定到

的特定 CSS 类来为您的标题提供默认样式。

.HeaderStyle {
    text-align: justify
}

<asp:GridView runat="server" ID="TestAlign" ShowFooter="True"
     DataSourceID="testDataSource" Width="600"
     HeaderStyle-CssClass="HeaderStyle">
    <Columns>
        <asp:BoundField DataField="left" HeaderText="-left-"
             HeaderStyle-CssClass="LeftAlign" />
        <asp:BoundField DataField="none" HeaderText="-none-"
             HeaderStyle-CssClass="InheritAlign" />
        <asp:BoundField DataField="right" HeaderText="-right"
             HeaderStyle-CssClass="RightAlign" />
    </Columns>
</asp:GridView>

【讨论】：

【解决方案4】：

解决方案变成了做一些特定的BoundFields，例如。

TextField : BoundField, NumberField : BoundField, 日期字段：绑定字段

在构造函数中我放了一个 this.HeaderStyle.CssClass = "TextBoundField"; （或管理此特定字段的 CSS 项）因为还有一个 this.ItemStyle.CssClass = "TextBoundField";

CSS 然后有一个 .TextBoundField { text-align: left; }（文本，数字和日期右）。

工作得很好，即使是 IE。 ;)

感谢您的帮助。

【讨论】：

【解决方案5】：

转到数据网格视图的列属性选择要更改对齐方式的列然后为要更改的每一列（左或右）更改水平对齐方式

【讨论】：