我用样式表构建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
最佳答案
您需要学习相对URL的工作方式。 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
结尾,并指向正确的绝对URL。如注释中所述,请勿将其替换为磁盘文件系统路径。当网页必须通过互联网提供时,这根本无法工作。您将来的Web访问者当然不会在自己的本地磁盘文件系统上拥有您的CSS文件。