Css 在GWT中分割图像会导致不需要的空白

我使用的是GWT2.03，我有一个图像，我想把它部分放在有背景的区域，部分放在背景之上。我正在使用FlexTable来实现这一点，并使用GIMP将图像分为两部分。我正在尝试将图像的顶部加载到第0行，将图像的底部加载到第1行。我将顶部图像的对齐设置为与底部对齐，但单元格底部有一点空间，因此图片的两部分不接触

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

!！[备选案文][1]

[1] ：。免费图像托管。net/uploads/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");

---

如何消除图像和单元格边界之间的空间？

这是由标准渲染模式造成的（有关详细说明，请参阅）

一个快速修复方法（应该适用于这种情况）是将图像切片设置为具有

显示：block

样式

---

PS：在这个大小（2x1）下它可能并不重要，但应该在表的大小不变/事先已知的情况下使用-它只是提供了比

FlexTable

更好的性能，GWT有一个名为的类，它针对这个用例。有关如何使用它的详细信息，请参阅。

我有一些建议：

• 我不确定这是否适用于FlexTable，但请尝试setCellPadding（0）或setCellSpacing（0）
• 尝试addStyleName或setStylePrimary，而不是setStyleName
• 尝试将样式设置为图像而不是格式化程序
• 还可以尝试将formatter.setVerticalAlignment（0,0，HasVerticalAlignment.ALIGN_BOTTOM）与formatter.setStyleName（1,0，HasVerticalAlignment.ALIGN_TOP）一起使用
• Firebug可以帮助您找到解决问题所需的更改。如果您发布代码和平（DOM），我们可以尝试帮助您

---

尝试通过css属性border collapse折叠表格上的边框-此问题得到+1，因为rancidfishbreath花了一秒钟时间包含所有重要信息，并以合理的方式格式化了问题-干得好！（我已经有一段时间没有在[gwt]标签上看到一个代表性较低的人写的这么好/正常的问题了。）乔恩，我试过了，但没什么不同。根据我的理解，边界崩溃只会对边界产生影响，而这不是这里的问题。谢谢你的帮助。伊戈尔，谢谢你的好话。。。还有解决办法！我本打算提出同样的建议，但我注意到了两件事：

decororpanel

应该只在怪癖模式下稳定（根据javadocs），而rancidfishbreath只需要一种简单的方式将图像的两部分放在一起——不需要面板，因为没有内容放在那里（或者从提供的代码来看是这样）。这很有效！这个示例只是我使用FlexTable所做工作的一个子集-我不想用不必要的细节来重载这个问题。谢谢你指出网格，因为提醒它在那里总是很好的。如果你看代码片段，我已经在做setCellPadding（0）和setCellSpacing（0）。底部图像上的样式正确地创建了绿色边框。顶部图像上的样式仅用于创建黄色边框以便于插图。黄色边框位于单元格级别，以证明顶部单元格正在创建额外的空间，而非底部单元格。