启用排序时的 ASP.NET GridView CSS 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/309035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP.NET GridView CSS issue when sorting turned on
提问by Dana Robinson
I created a GridView in an ASP.NET application and used the Auto Format tool to apply an attractive style. Now I'm moving the style markup to the CSS sheet and I'm having a weird problem where the text in the header row isn't the correct color (it should be white but it shows up a bright blue). This problem only shows up when I turn sorting on.
我在 ASP.NET 应用程序中创建了一个 GridView 并使用自动格式工具来应用一个有吸引力的样式。现在我将样式标记移到 CSS 表中，但我遇到了一个奇怪的问题，即标题行中的文本颜色不正确（它应该是白色，但显示为亮蓝色）。 这个问题只在我打开排序时出现。
Everything else works fine. For example, I can change the header background to red and it turns red and the rest of the grid styles are applied appropriately.
其他一切正常。例如，我可以将标题背景更改为红色，然后它会变成红色，其余的网格样式会被适当地应用。
Anybody have any clues about what the deal is? I've included code snippets below. I'm also fairly new to CSS. If anyone has any tips to make my CSS markup better in some way, let me know.
有人对这笔交易有任何线索吗？我在下面包含了代码片段。我对 CSS 也很陌生。如果有人有任何提示以某种方式使我的 CSS 标记更好，请告诉我。
Thanks!
谢谢！
Here is the ASP.NET code. I can add ForeColor="White" to the HeaderStyle and everything works normally.
这是 ASP.NET 代码。我可以将 ForeColor="White" 添加到 HeaderStyle 并且一切正常。
<asp:GridView ID="GridView1" runat="server" CssClass="grid"
AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1"
EmptyDataText="There are no data records to display." AllowSorting="True"
CellPadding="4" GridLines="Both">
<FooterStyle CssClass="grid-footer" />
<RowStyle CssClass="grid-row" />
<Columns>
<asp:BoundField DataField="Kingdom" HeaderText="Kingdom"
SortExpression="Kingdom" />
<asp:BoundField DataField="Phylum" HeaderText="Phylum"
SortExpression="Phylum" />
<asp:BoundField DataField="GenusSpeciesStrain" HeaderText="Genus species (strain)"
SortExpression="GenusSpeciesStrain" />
<asp:BoundField DataField="Family" HeaderText="Family"
SortExpression="Family" />
<asp:BoundField DataField="Subfamily" HeaderText="Subfamily"
SortExpression="Subfamily" />
<asp:BoundField DataField="ElectronInput" HeaderText="Electron Input"
SortExpression="ElectronInput" />
<asp:BoundField DataField="OperonLayout" HeaderText="Operon Layout"
SortExpression="OperonLayout" />
</Columns>
<PagerStyle CssClass="grid-pager" />
<SelectedRowStyle CssClass="grid-selected-row" />
<HeaderStyle CssClass="grid-header" />
<EditRowStyle CssClass="grid-row-edit" />
<AlternatingRowStyle CssClass="grid-row-alternating" />
And this is the content from style sheet I'm using:
这是我正在使用的样式表的内容：
body {
}
.grid
{
color: #333333;
}
.grid-row
{
background-color: #EFF3FB;
}
.grid-row-alternating
{
background-color: White;
}
.grid-selected-row
{
color: #333333;
background-color: #D1DDF1;
font-weight: bold;
}
.grid-header, .grid-footer
{
color: White;
background-color: #507CD1;
font-weight: bold;
}
.grid-pager
{
color: White;
background-color: #2461BF;
text-align: center;
}
.grid-row-edit
{
background-color: #2461BF;
}
回答by
I'm guessing the bright blue is very similar to the color of a hyperlink. Making the gridview sortable means you'll have an a tag inside your header instead of just plain text.
我猜测亮蓝色与超链接的颜色非常相似。使 gridview 可排序意味着您的标题中将有一个标签，而不仅仅是纯文本。
This should sort it:
这应该对其进行排序：
.grid-header a { color: White; background-color: #507CD1; font-weight: bold; }
回答by gabe
I'm not sure how you're getting a white background on your header w/ or w/o the sorting because you have your grid-header background set that blue color (#507CD1) in your CSS:
我不确定您是如何在带有或不带有排序的页眉上获得白色背景的，因为您的网格页眉背景在 CSS 中设置了蓝色（#507CD1）：
.grid-header, .grid-footer { color: White; background-color: #507CD1;font-weight: bold; }
.grid-header, .grid-footer { color: White; background-color: #507CD1;font-weight: bold; }
here's what it needs to be if you want the header background white (you'll need change the font color to something darker also):
如果您想要标题背景为白色，则需要这样做（您还需要将字体颜色更改为更深的颜色）：
.grid-header, .grid-footer { color: #000; background-color: #fff;font-weight: bold; }
.grid-header, .grid-footer { color: #000; background-color: #fff;font-weight: bold; }
and you also need to remove the ForeColor from the GridView's HeaderStyle attribute to be able to see the text in your header like so:
并且您还需要从 GridView 的 HeaderStyle 属性中删除 ForeColor 才能看到标题中的文本，如下所示：
<HeaderStyle CssClass="grid-header" />
回答by gabe
The following worked for me. Add:
以下对我有用。添加：
.grid-header th a
{
color: White;
}
The "th a" works regardless of AllowSorting.
th a无论 AllowSorting 如何，“ ” 都有效。
回答by gabe
This is the only way I can get it to work:
这是我让它工作的唯一方法：
.HeaderStyle a
{
background-color: #DE7B0A;
color: White!important
}
I've noticed that the .aspxthat gets rendered puts a style="color:#333333"tag on the link itself. Making the color option !importantto override the default rendering is the only way I can get it to work.
我注意到.aspx被渲染的 将style="color:#333333"在链接本身上放置一个标签。使颜色选项!important覆盖默认渲染是我让它工作的唯一方法。
Hope that helped someone.
希望对某人有所帮助。
回答by dbc Austin
Note that the addition of the th in style that James in Indy suggested , as in
请注意，在 Indy 中 James 建议添加 th in style ，如
.grid-header th a { color: White; }
.grid-header th a { color: White; }
will prevents links in pager section from being effected by setting you use for sort column.
将通过设置您用于排序列来防止分页器部分中的链接受到影响。
回答by user39603
The header color in the stylesheet is correct: #507CD1 is bright blue. Where does it show up as white, then? In Visual Studio's designer? Do you mean for the header backgroundto be white, or the text?
样式表中的标题颜色是正确的：#507CD1 是亮蓝色。那么它在哪里显示为白色呢？在 Visual Studio 的设计器中？你的意思是标题背景是白色的，还是文字？
Also, it couldn't hurt to remove the ForeColor="White" from the markup. It's already in the stylesheet.
此外，从标记中删除 ForeColor="White" 也没什么坏处。它已经在样式表中了。
Update: I haven't read the question thoroughly enough, my apologies. The above is nonsense. (Or the question has been modified while I was composing my answer. Don't know)
更新：我没有足够彻底地阅读这个问题，我很抱歉。以上都是废话。（或者在我撰写答案时问题已被修改。不知道）
