H：panelGrid的带有嵌入式H：graphicImage的不正确显示

Question

我的问题关于h的显示：graphicImage的一个小时内：panelGrid的

<h:panelGrid border="0" cellspacing="0" cellpadding="0" > 
    <h:graphicImage height="63" width="270" value="images/NewAOnly.PNG" /> 
    <h:graphicImage height="60" width="270"  value="images/NewABottom.PNG" /> 
</h:panelGrid> 

顶部.PNG文件是270×63无边界区域。底部.PNG是270 x 60没有边界区域。我的问题是，border =“0”，cellspacing =“0”和cellpadding =“0”，为什么这两个图像不是一个在另一个之上，两个图像之间没有空间？

Answer 1

当您使用strict doctype时会发生这种情况。长话短说，请查看Mozilla开发者网络上的文章：Images, Tables, and Mysterious Gaps。至于文档类型，您可以通过使用怪癖或过渡文档类型来解决此问题（作为快速测试，完全删除DOCTYPE行）。但现在不推荐这样做。

如果您绝对肯定该表格是您以这种方式显示图像的具体功能要求的正确工具，一个div是出于某种可疑的原因绝对不是一种选择（并且你完全意识到“Semantic HTML”的重要性），那么你可以通过使表单元格中的图像块级元素来解决这个问题。

td img { 
    display: block; 
} 

请注意，这个问题与JSF完全无关。在这个问题的背景下，JSF仅仅是一个HTML代码生成器。