Notes 客户端和 Web 浏览器之间的 css 功能不同答案

【问题标题】：css functions differently between Notes Client and Web BrowserNotes 客户端和 Web 浏览器之间的 css 功能不同
【发布时间】：2013-11-13 23:57:28
【问题描述】：

我在资源 css 中有以下内容并应用于 XPage：

.wfsHeader     {background:rgb(230,230,230) ; font-size:12pt; font-weight:bold;}
.wfsHeaderLite {background:rgb(240,240,240) ; font-size:10pt; font-weight:bold;}
.separator  {height:1px ; background:rgb(230,230,230);}
.SeperatorLite {height:1px ; background:rgb(240,240,240);}
.separator2  {height:2px ; background:rgb(192,192,192);}
.label      {font-size: 8pt; font-weight:bold ;}
.label10     {font-weight:bold;font-size:10pt ;}

当在浏览器中查看 XPage 时，wfsHeader 和 wfsHeaderLite 和 sperator 都按预期显示。但是，当在 Notes 客户端中查看时，分隔符可以正常工作（显示 1 px 灰线，但 wfsHeader 和 wfsHeaderLite 无效。我看不出分隔符和 wfsHeader 的标记之间有任何真正的区别，除了一个以高度表示，另一个以字体大小表示。它们都应用于单个面板或表格单元格。我的印象是，CSS 应该在 Notes 客户端和 Web 浏览器之间工作。非常困惑为什么分隔符在两者中都有效，但 wfsHeader 仅在网络浏览器中有效。

【问题讨论】：

标签： html css xpages lotus-notes

【解决方案1】：

XPiNC 基于 Mozilla XULRunner，它的行为与您喜欢的浏览器不同。 XULRunner 在 Notes 9.0.1 中升级到了较新的版本，所以您可能想尝试一下。

【讨论】：

【解决方案2】：

在 Firefox 浏览器中试用您的 CSS。如果那里看起来不错，那么在 Notes-Client 中也应该看起来不错。

使用 Firefox 开发者工具 (STRG+I) 检查哪个 CSS 规则适用于哪个元素。

【讨论】：

使用 FireFox 和 Chrome，查看了 FireBug 中的 css，一切看起来都不错，并且可以正常工作。仍然无法在 Notes 客户端中工作。也许 9.0.1 可能会修复它。
我们正在讨论在 Notes 客户端中显示 XPage，不是吗？在这种情况下，可能是 XULRunner 与您的 CSS 存在一些特定于版本的问题，实际上，请先尝试 9.0.1，然后再检查其他原因。
使用 Firebug Lite 组件能够检查 Notes 客户端如何应用 CSS 规则。我怀疑你只是需要更多的特异性（例如div.wfsHeader 而不仅仅是.wfsHeader）。
因此，无需对 css 文件进行任何更改，也无需升级到 9.0.1，也无需对 XPage 进行任何实质性更改，Header 和 HeaderLite 都已开始在 Notes 客户端中工作。为此我很高兴，但我很想知道为什么。可能永远不会知道的生命奥秘之一。去图吧！

【解决方案3】：

XULRunner 组件受制于 HTTP 资源的缓存，这些资源为此提供了适当的 HTTP 标头。因此，可能在您更改 CSS 文件后不重新获取它是一个缓存问题。您有两个选择：关闭 Notes 和 Designer 以退出所有 vbelonging 进程并重新启动。然后缓存在大多数情况下会得到它，并完成重新获取。但是由于这非常麻烦，您还可以使用 XPinc 浏览器刷新按钮的“清除私有数据”选项（使用它旁边的小向下箭头来使用此选项）

【讨论】：