WPF WebBrowser添加水印：加载HTML时transform属性失效问题

你遇到的问题核心是加载带内容的HTML时，水印的transform属性因CSS优先级冲突或层叠上下文干扰失效：第二个方法中给所有div设置了全局样式，IE11对复合CSS属性（如transform）的优先级处理存在差异，同时内容元素可能干扰水印的定位计算。

方案1：提升水印样式优先级并强制层级 #

修改ApplyHtmlStylesForDetailsWindow方法中的.watermark样式，增加层级控制并给transform添加强制优先级，确保样式不被覆盖：

private string ApplyHtmlStylesForDetailsWindow(string content)
{
    return "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=11\" />" +
           "<html><head><style>" +
           "html, body { height: 100%; margin: 0; padding: 0; background-color:#2C3040 !important; color: white; }" + 
           ".watermark { position: fixed; top: 50%; left: 50%; " +
           "-ms-transform: translate(-50%, -50%) rotate(-45deg) !important; " + // IE11兼容前缀
           "transform: translate(-50%, -50%) rotate(-45deg) !important; " +
           "font-size: 20px; font-family:'Roboto', sans-serif; " + // 避免继承全局div字体样式
           "color: rgba(102, 105, 117, 0.5); white-space: nowrap; pointer-events: none; " +
           "z-index: 9999 !important; }" + // 强制最高显示层级
           "h1, h2, h3, h4, h5, h6, p, span, div {{ font-family: 'Roboto', sans-serif; font-size:12px; color: #9A9EB1 !important; }}" +
           "th, td {{ font-size:12px; font-family: 'Roboto', sans-serif !important; padding: 10px; border: 1px solid white !important  }}" +
           "td {{ background-color: transparent !important; }}" +
           "img {{ width:60%; height: 60% !important;}}" +
           "</style></head><body>" +
           "<div class=\"watermark\">ASC-YardimPanel</div>" +
           $"{content}" +
           "</body></html>";
}

方案2：调整水印DOM位置（可选） #

将水印div移到内容之后，利用fixed定位的层叠特性，避免被内容中的高优先级元素意外覆盖：

// 修改body内元素顺序
"</style></head><body>" +
$"{content}" +
"<div class=\"watermark\">ASC-YardimPanel</div>" +
"</body></html>";

额外排查点 #

• 检查传入的content是否包含重置html/body样式的代码（如overflow: hidden），这类样式会干扰fixed定位的计算
• 确认IE11文档模式已正确启用（你已设置X-UA-Compatible=IE=11，此步骤无需调整）

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