Question

我的问题是在h：panelGrid

中显示h：graphicImage

<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 x 63，没有边框区域。底部.PNG是270 x 60，没有边框区域。

我的问题是，在border =“0”，cellspacing =“0”和cellpadding =“0”的情况下，为什么这两个图像不是一个在另一个之上，而它们之间没有空格？

Answer 1

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

如果您绝对肯定该表是适合您以这种方式显示图像的具体功能要求的正确工具，例如div出于一些可疑的原因绝对不是一个选项（而且你已经完全意识到＆＃34; Semantic HTML＆＃34;）的重要性，那么你可以通过在表格中制作图像来解决这个问题单元格阻止级别元素。

td img {
    display: block;
}

请注意，此问题与JSF完全无关。 JSF在这个问题的上下文中只是一个HTML代码生成器。

h：panelGrid，嵌入式h：graphicImage无法正确显示

1 个答案: