为何部分CSS功能在WPF WebBrowser控件中无法正常生效

根因说明 #

WPF 自带的 WebBrowser 控件默认运行在 IE7 兼容模式，该模式下存在两个兼容性限制：

• 不支持 CSS3 :nth-child 系列伪类选择器
• 仅支持 <a> 标签的 :hover 伪类，对 <tr>、<td> 等非链接元素的 hover 识别存在缺陷

同时你现有 CSS 存在笔误：.lb_table_subtitle 的 hover 规则漏写了类选择器的 .，也会导致对应 hover 效果失效。

可落地操作步骤（无需修改SQL返回的表格HTML代码） #

1. 强制提升WebBrowser渲染内核 #

你在拼接完整HTML字符串时，可自行补充HTML头部声明，不会修改SQL返回的原有表格内容，操作如下：

<!DOCTYPE html>
<html>
<head>
<!-- 强制WebBrowser使用本机IE最高版本内核渲染，IE8及以上就支持你需要的两个CSS特性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
/* 这里放你调整后的CSS样式 */
</style>
</head>
<body>
<!-- 这里直接插入从SQL获取的原有表格HTML代码即可，无需做任何修改 -->
</body>
</html>

2. 调整补充CSS样式 #

修正笔误后，可补充兼容规则提升低版本内核下的表现：

table tr{
background-color: #494D54;
color:lightblue;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
}
/* 补充tr:hover下的td规则，老IE下识别更稳定 */
table tr:hover, table tr:hover td{
background-color: #636873;
}
table{
  border-collapse: collapse;
  width: 100%;
}

table td{
  border: 1px solid #ddd;
  padding: 8px;
}
.lb_table_subtitle{
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color:#114C88;
    color: white;
}
/* 修正漏写的.符号 */
.lb_table_subtitle:hover{
    background-color:#636873;
}
table tr:nth-child(odd){background-color: #2E3136;}
/* 以下是兼容IE7的奇偶行备选规则，和上面nth-child规则共存即可，高版本内核会自动忽略 */
table tr + tr {background-color: #2E3136;}
table tr + tr + tr {background-color: #494D54;}
table tr + tr + tr + tr {background-color: #2E3136;}
table tr + tr + tr + tr + tr {background-color: #494D54;}
/* 按需叠加到你的表格最大行数即可，无需修改HTML */
body {
    background-color:#494D54;
    border-radius: 50px;
}

内容的提问来源于stack exchange，提问作者user16713737