GWT嵌套TabLayoutPanel显示中的伪块是什么？

在GWTP应用程序中，我有一个嵌套在另一个TabLayoutPanel中的TabLayoutPanel。我正在为每个演示者/视图使用UiBinder

我没有在这里包括UiBinder行（抱歉），但我很难理解为什么嵌套TabLayoutPanel会在两个选项卡行之间添加一个额外的橙色薄的未标记颜色块（参见下图）。具有垂直面板而不是嵌套TabLayoutPanel的顶级选项卡缺少额外的未标记橙色块

你以前见过这个展览吗

My MainView.ui.xml如下所示：

<g:TabLayoutPanel barHeight="2" barUnit="EM">
<g:tab>
    <g:header>Invite</g:header>
    <g:VerticalPanel/>
</g:tab>

<g:tab>
    <g:header>News</g:header>
    <g:VerticalPanel/>
</g:tab>

<g:tab>
    <g:header>Teams</g:header>
    <g:TabLayoutPanel barHeight="2" barUnit="EM"/>
</g:tab>

</g:TabLayoutPanel>

邀请
新闻
团队

对于第三个选项卡，在之后嵌套另一个TabLayoutPanel是否正确

我的嵌套TabLayoutPanel是用以下格式的每个选项卡直接定义的：

<g:tab>
    <g:header>All Teams</g:header>
    <g:VerticalPanel/>
</g:tab>

所有团队

Google Developer Tools显示，在顶级TabLayoutPanel和嵌套的TabLayoutPanel之间插入了另一个DIV，class=“gwt TablayOutPablTab get TabLayoutPanelTab selected”。此额外选项卡嵌套在类为“gwt TabLayoutPanelTabs”的DIV中

这些额外的div在两行选项卡之间显示额外的块

---

当使用垂直面板且所需的嵌套TabLayoutPanel放置在该垂直面板内时，可避免伪块

在MainView.ui.xml中，而不是：

<g:tab>
    <g:header>Teams</g:header>
    <g:TabLayoutPanel barHeight="2" barUnit="EM"/>
</g:tab>

团队

使用以下命令：

<g:tab>
    <g:header>Teams</g:header>
    <g:VerticalPanel/>
</g:tab>

团队

然后在团队的UiBinder文件中：

<g:VerticalPanel>
   <g:TabLayoutPanel ...>
       <g:tab>
           ...

...

---

通过添加“额外”垂直面板，可以防止GWT为此类问题添加额外的“ghost”表格输出面板。

。最好的办法是使用Chrome开发工具进行检查，看看这里到底显示了什么。没有UiBinder代码，很难判断问题是什么。