css - 在 GWT 中拆分图像会导致不需要的空白

Question

我正在使用 GWT 2.03，我有一张图像，我想将其部分放置在具有背景的区域中，部分放置在背景上方。我正在使用 FlexTable 来尝试完成此操作，并使用 GIMP 将图像切割成两部分。我试图将图像的顶部加载到第 0 行，将图像的底部加载到第 1 行。我将顶部图像的对齐方式设置为 ALIGN_BOTTOM，但单元格底部有一点空间，因此图片的两部分不要接触。

这是一张显示我在说什么的图片。我将单元格的背景设置为黄色以显示单元格边界所在的位置。底部图像和背景渲染正确。

![替代文字][1]

[1]: http://www .免费图像托管。净/上传/f02462d659.png

这是相关的代码片段:

FlexTable table = new FlexTable();
table.setCellSpacing(0);
table.setCellPadding(0);
table.setBorderWidth(0);
FlexCellFormatter formatter = table.getFlexCellFormatter();

table.setWidget(0, 0, topImage);
formatter.setStyleName(0, 0, "topImageStyle");
formatter.setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_BOTTOM);
table.setWidget(1, 0, bottomImage);
formatter.setStyleName(1, 0, "bottomImageStyle");

我怎样才能摆脱图像和单元格边界之间的空间？

Answer 1

这是由标准渲染模式引起的(详见 this article)。

一个快速修复(应该适用于这种情况)是将图像切片设置为具有 display: block 样式。

PS:这个尺寸 (2x1) 可能无关紧要，但 Grid应该在表的大小不变/事先已知时使用 - 它只是提供比 FlexTable 更好的性能。