jsf 页面上的 css 样式在服务器上未正确呈现答案

【问题标题】：css style on jsf page is not rendering correctly on serverjsf 页面上的 css 样式在服务器上未正确呈现
【发布时间】：2013-12-04 08:36:14
【问题描述】：

我正在为我的 jsf 页面设置样式，但是当我运行它时，浏览器 (Chrome) 上没有显示任何内容。
我正在使用 eclipse 开普勒、glassfish4 和 primefaces
这是html代码

   <div class="box">
        <p:graphicImage url="images/usericon.png" id="usericon"
            alt="utilisateur IsetN"></p:graphicImage>
        <br></br>
        <p:inputText placeholder="Login" required="true"></p:inputText>
        <br></br>
        <p:password value="#{passwordController.password}"
            promptLabel="#{msg['password.promptLabel']}"
            weakLabel="#{msg['password.weakLabel']}"
            goodLabel="#{msg['password.goodLabel']}"
            strongLabel="#{msg['password.strongLabel']}"    required="true"
            placeholder="Mot de passe" />
        <br></br>
        <p:commandButton value="Connexion" />
        <br></br>
        <h:link url="#">Aide?</h:link><br></br>
        </div>

这就是风格

     .box{
         height:100px;
          width:100px;
         /*border-radius*/
         -webkit-border-radius:15px;
            -moz-border-radius:15px;
           border-radius:15px;
           background-color:#cdcdcd;
           /*box-shadow*/
           -webkit-box-shadow:0 8px 6px -6px #efefef;
          -moz-box-shadow:0 8px 6px -6px #efefef;
           box-shadow:0 8px 6px -6px #efefef;
           margin:50% 50% 50% 50%;
               }

注意：没有样式的组件效果很好。

【问题讨论】：

“浏览器上没有显示任何内容” 这似乎与 CSS 没有任何关系。在浏览器中右键单击页面，执行查看源代码。你看到了什么？您是否看到原始 JSF 源代码或其生成的 HTML 输出？

标签： html css eclipse jsf

【解决方案1】：

为我工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions">

<h:head>

    <style type="text/css">
.box {
    height: 100px;
    width: 100px;
    /*border-radius*/
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color: #cdcdcd;
    /*box-shadow*/
    -webkit-box-shadow: 0 8px 6px -6px #efefef;
    -moz-box-shadow: 0 8px 6px -6px #efefef;
    box-shadow: 0 8px 6px -6px #efefef;
    margin: 50% 50% 50% 50%;
}
</style>


</h:head>

<h:body>

    <div class="box">
        <p:inputText placeholder="Login" required="true" value="#"></p:inputText>
    </div>

</h:body>
</html>

当我运行你的 CSS 时，我发现“margin: 50% 50% 50% 50%;”把你的灰色框放在屏幕中间，但我必须滚动才能看到它！我知道这很愚蠢，但是您确定您的组件不只是显示在主滚动区域之外吗？

【讨论】：