火狐。如何使边框颜色与文本不同？答案

【问题标题】：Firefox. How to make border color different than text?火狐。如何使边框颜色与文本不同？
【发布时间】：2012-02-10 22:44:09
【问题描述】：

我的 ASP.net 网站中的一个 GridView 标头有问题。我想在标题单元格中以绿色背景颜色显示白色文本。我还想将这些单元格上的边框颜色保持为黑色。

这是我用于标题的 CSS：

.myHeaders
{    
    color: White;
    font-size: 7pt;
    background-color: Green;
    border-color: Black
}

我在 Gridview 中使用 HeaderStyle 属性引用它：

<HeaderStyle CssClass="myHeaders" />

这在 Chrome 和 IE 中运行良好，但在 Firefox 中，边框颜色设置为与前景色相同的值！我怎样才能让它工作？

谢谢！

【问题讨论】：

如果您显示生成的html，您将获得更多帮助。
对 ASP 一无所知，但您为什么使用CssClass 而不是class？
@Niklas_R：CssClass 是映射到客户端class 的服务器端属性。
@Niklas: HeaderStyle 是 ASP.NET 控件 GridView 的 property（通常呈现为 Table），它有一个属性 CssClass 实际上是（将呈现为） CSS 类。因此，您可以将此问题翻译为“表格单元格上的边框颜色 css 不适用于 Firefox”。
@TimSchmelter 谢谢！

【解决方案1】：

Firefox does not support border-color 在表格元素上。只需使用 border 速记属性 (border: 1px solid black)。这也应该适用于其他浏览器。

【讨论】：

链接到的页面是关于 HTML 属性bordercolor。与 CSS 支持无关。
是的，但 FF10 中的经验测试（使用 Firebug 添加设置为“border-color: Black”然后是“border-color: black”的样式属性）让我相信该链接适用CSS 样式属性也是如此。当使用 Firebug 添加设置为“border: 1px solid Black”或“border: 1px solid black”的样式属性时，同样的经验测试就像一个魅力。

【解决方案2】：

您为什么不直接右键单击您的 GridView 并选择“自动套用格式”，以便为您的 GridView 自定义颜色。 ?

【讨论】：

【解决方案3】：

单独使用边框颜色显然不起作用。您应该至少使用border-style 来设置边框。

.myHeaders
{    
    color: White;
    font-size: 7pt;
    background-color: Green;
    border-style: Solid;
    border-color: Black
}

【讨论】：

border-style的初始值为none，所以单独设置border-color不会创建边框。但情况肯定更复杂，因为问题是“这在 Chrome 和 IE 中运行良好。”
@JukkaK.Korpela 很有可能该页面正在使用边框折叠，然后依赖于不同的默认 UA 样式表......

【解决方案4】：

您正在设置行的颜色或tr-tag。这意味着行内的任何子元素都会继承此颜色。 Firefox 遵循 CSS 规则，规定所有四个边框都应定义颜色，如果没有，将使用默认颜色，即color: red。

.myHeaders {
    color: Red;
}

这就是为什么每个边框都变成红色（或白色，在您的情况下）。您应该将任何兄弟的边框颜色设置为继承。这将强制 Firefox 忽略颜色并在其继承树中找到最接近的边框颜色定义。

tr.myHeaders > td, tr.myHeaders > th {
    border-color: inherit;
}

【讨论】：

【解决方案5】：

我最后添加了：

foreach (TableCell tc in e.Row.Cells)
{
    tc.Attributes["style"] = "border-color: Black";
}

在我的 GridView 的 RowDataBound 事件中。这行得通。

我很不高兴我不得不使用代码隐藏解决方案，但现在不想花更多时间在它上面！感谢您的所有帖子！

【讨论】：