使用 <h:outputStylesheet> 使 <p:outputLabel> 组件不可见答案

【问题标题】：Using <h:outputStylesheet> makes <p:outputLabel> component invisible使用 <h:outputStylesheet> 使 <p:outputLabel> 组件不可见
【发布时间】：2015-01-10 19:49:06
【问题描述】：

我在 JSF 中处理的网页存在一个相当奇怪的问题。基本上，当我使用 h:outputStylesheet 标记包含网站的样式表时，表示文档标题的 outputLabel 组件就会消失。

outputLabel在页面源中，渲染属性=true，但是不可见。

我在带有 Glassfish 4.1 的 netbeans 中使用 JSF2.2、PrimeFaces 5.1、OmniFaces 1.8（尽管页面上没有任何omnifaces 标签）。在 Chrome 版本 38.0.2125.111 m 中进行测试。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:pf="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>Activity View</title>
        <h:outputStylesheet library="stylesheets" name="main.css"/>
    </h:head>
    <h:body>
        <div id="title" class="pageHeader">
            <pf:outputLabel value="Activity: [Title]: [Type]"/>
        </div>
        <div>
            <pf:accordionPanel>
                <pf:tab title="Brief" >
                    <p>
                    </p>
                </pf:tab>
            </pf:accordionPanel>            
        </div>
    </h:body>
</html>

这是 CSS：

.pageHeader{
font-size: x-large;
float: left;
margin-right: 10px;

}

谁能解释为什么会这样？我在网站的其他地方使用过这种模式，没有任何问题。

【问题讨论】：

也许你可以在 Firebug - html 标签 - 检查器中更接近原因
我试一试

标签： html css jsf primefaces

【解决方案1】：

原因是float: left; - 您可以通过选择 div 并在 firebug 中一一禁用样式来验证这一点：

浮动使 div 重叠，如 here 所述。

所以你可以

删除float: left;。似乎与当前代码没有区别。
把style="clear: both"放在下面的div上

还有更多解决方案，称为“clearfix”。

【讨论】：

谢谢，实际上我自己已经做到了这一点，但很高兴你能抽出时间来看看我的问题。

【解决方案2】：

我不确定这是否能解决问题，但您可以尝试使用标签：

xmlns:p="http://primefaces.org/ui

而不是

xmlns:pf="http://primefaces.org/ui"

对于输出标签：

<p:outputLabel />

而不是

<pf:outputLabel />

【讨论】：

感谢您的建议，但尚未解决。开始怀疑这是否是一个错误，但我对自己的 JSF 知识没有足够的信心来确定。