Question

我用styesheets构建JSF页面。当我在Eclipse中使用预览功能时，它似乎有效，但是当我在IE8上测试它们时，它们似乎没有任何效果。

我正在使用复合视图来指定页面的总体布局，如下所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <head>
        <link rel="stylesheet" type="text/css" href="/css/masterTemplateCSS/masterTemplateCSS.css" />


        <title><ui:insert name="title"></ui:insert></title>
    </head>

    <body>

        <div class="left_Sidebar">
            <ui:insert name="leftSidebar">

            </ui:insert>
        </div>  

        <div class="bulk_text">
            <ui:insert name="content">

            </ui:insert>
        </div>

        <div class="foot">
            <ui:insert name="footer">

            </ui:insert>
        </div>      

    </body>
</html>

然后我尝试测试它们。

<ui:composition template="/templates/masterTemplate.xhtml">

    <ui:define name="title">Create Screen</ui:define>

    <ui:define name="leftSidebar">
        Left sidebar
    </ui:define>
    <ui:define name="content">

模板有效，我相信css路径是正确的。我还用验证器测试了css文件，他们都检查了。但它仍然似乎在实际的浏览器中工作：S

Answer 1

您需要了解相对网址的工作原理。 CSS文件的相对URL

<link rel="stylesheet" type="text/css" href="/css/masterTemplateCSS/masterTemplateCSS.css" />

以前导斜杠开头，因此它相对于域根目录而实际上的URL指向http://localhost:8080/css/masterTemplateCSS/masterTemplateCSS.css

如果您的Web应用程序未部署在上下文根目录上，而是部署在子上下文路径上，例如http://localhost:8080/contextname，则显然不会起作用。 CSS文件应指向http://localhost:8080/contextname/css/masterTemplateCSS/masterTemplateCSS.css。

用

替换链接

<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/masterTemplateCSS/masterTemplateCSS.css" />

这样它最终会以/contextname/css/masterTemplateCSS/masterTemplateCSS.css结束，从而指向正确的绝对网址。

不将其替换为您在评论中提到的磁盘文件系统路径。当网页通过互联网提供时，这根本不起作用。您未来的Web访问者肯定没有将CSS文件放在他们自己的本地磁盘文件系统中。

CSS不适用于浏览器，但它适用于Eclipse

1 个答案: