相同的JSF+CSS会导致不同的结果
我有两个项目，一个是另一个的副本，除了一些bean的更改 以下是我得到的截图： 正如你所看到的，在新项目中，我有一个丑陋的边界，没有办法改变它！ 使用NetBeans的file diff工具，它们的css之间没有任何区别，甚至HTML也与我在Firefox的inspector中尝试过的完全相同 怎么了 以下是他们的css+jsf代码： 旧页：相同的JSF+CSS会导致不同的结果,css,jsf,xhtml,primefaces,Css,Jsf,Xhtml,Primefaces,我有两个项目，一个是另一个的副本，除了一些bean的更改 以下是我得到的截图： 正如你所看到的，在新项目中，我有一个丑陋的边界，没有办法改变它！ 使用NetBeans的file diff工具，它们的css之间没有任何区别，甚至HTML也与我在Firefox的inspector中尝试过的完全相同 怎么了 以下是他们的css+jsf代码： 旧页： <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:body>
<!-- Script di callback per gestire situazioni in cui il form di login non è stato completato correttamente -->
<script type="text/javascript">
function animateNewPost(id) {
if(id != null)
jQuery('#post_' +id).effect("slide", {}, 500);
}
function animateDeletedPost(id) {
if(id != null)
jQuery('#post_' +id).effect("slide", {mode:"hide"}, 500);
}
</script>
<p:growl id="postMessage" autoUpdate="true" showDetail="true"/>
<p:outputPanel id="postPanel">
<!-- Pannello per l'inserimento del post -->
<div id="postBox">
<p:panel id="postForm" rendered="#{loginBean.loggedIn}">
<h:form>
<h:inputText value="#{postBean.postText}" size="95"/>
<p:commandButton icon="ui-icon-search" rendered="false"/><br/>
<p:commandLink ajax="true" action="#{postBean.insertPost}" value="Inserisci Post" update=":postMessage, :postList, :postForm" oncomplete="animateNewPost(#{lazyPostBean.latestId})"/>
</h:form>
</p:panel>
<p:panel id="postList">
<p:dataTable id="postTable" var="post" value="#{lazyPostBean.posts}" emptyMessage="Non ci sono posts.">
<p:column style="border: 0px; background: rgba(0,0,0,0);">
<div class="feature">
<div class="post" id="post_#{post.idPost}">
<h:outputLink id="link" value="#">#{post.autore.username}</h:outputLink> scrive :
<br/>
<hr/>
<div class="blockquote">
<div class="quotopen"></div>
<div class="quotcont">
<p><h:outputText value="#{post.testo}"/></p>
</div>
</div>
<hr />
<p:outputPanel style="float: left;" rendered="#{post.autore.equals(loginBean.utente)}">
<h:form>
<p:commandLink style="font-size: 12; color: white;" value="Rimuovi Post" action="#{postBean.removePost(post)}" onclick="animateDeletedPost(#{post.idPost})" update=":postList"/>
</h:form>
</p:outputPanel>
<p class="date">#{post.formatDate()} | #{post.formatTime()}</p>
</div>
</div>
</p:column>
</p:dataTable>
</p:panel>
</div>
</p:outputPanel>
</h:body>
有什么建议吗？通过Firefox/Chrome/IE等中的web开发工具，应该很容易判断样式来自何处。您是否使用这些工具检查过元素的样式？我已经使用Firefox的inspector进行了尝试。正如我在第一篇文章中所写，我已经尝试使用Firefox的inspector，html也是一样的！：\我知道了，但是你用过工具吗？是的，我用过。它似乎不需要prime.css，因为.ui datatable偶数和.ui datatable奇数类不会有任何效果！
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:pou="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<!-- Script di callback per gestire situazioni in cui il form di login non è stato completato correttamente -->
<script type="text/javascript">
function animateNewPost(id) {
if(id != null)
jQuery('#post_' +id).effect("slide", {}, 500);
}
function animateDeletedPost(id) {
if(id != null)
jQuery('#post_' +id).effect("slide", {mode:"hide"}, 500);
}
</script>
</h:head>
<h:body>
<pou:effect for="postPanel" event="load" type="bounce">
<f:param name="mode" value="'show'" />
<f:param name="direction" value="'up'" />
</pou:effect>
<pou:outputPanel id="postPanel">
<div id="postBox">
<pou:panel id="postForm" rendered="#{loginBean.logged}">
<h:form>
<h:inputText value="#{postBean.postText}" size="95"/><br/>
<pou:commandLink ajax="true" action="#{postBean.insertPost}" value="Inserisci Post" update=":postPanel" oncomplete="animateNewPost(#{postListBean.latestId})"/>
</h:form>
</pou:panel>
<pou:panel id="postList" style="border: 0px;">
<pou:dataTable emptyMessage="Non ci sono post." id="postTable" value="#{postListBean.posts}" var="post">
<pou:column style="border: 0px; background: rgba(0,0,0,0);">
<div class="feature">
<div class="post" id="post_#{post.idPost}">
<h:outputLink id="link" value="#">#{post.autore.username}</h:outputLink> scrive :
<br/>
<hr/>
<div class="blockquote">
<div class="quotopen"></div>
<div class="quotcont">
<p><h:outputText value="#{post.testo}"/></p>
</div>
</div>
<hr />
<pou:outputPanel style="float: left;" rendered="#{post.autore.equals(loginBean.utente)}">
<h:form>
<pou:commandLink style="font-size: 12; color: white;" value="Rimuovi Post" action="#{postBean.removePost(post)}" onclick="animateDeletedPost(#{post.idPost})" update=":postList"/>
</h:form>
</pou:outputPanel>
<p class="date">#{post.formatDate()} | #{post.formatTime()}</p>
</div>
</div>
</pou:column>
</pou:dataTable>
</pou:panel>
</div>
</pou:outputPanel>
</h:body>
</html>