GWT - Horizo​​ntalPanel 的 InternetExplorer UI 问题

Question

在我的 GWT 应用程序中，我有一个按钮面板，实现为 HorizontalPanel，其中包含包裹在 <g:cell> 元素中的 Button 小部件。

<g:HorizontalPanel styleName="{style.horizontalPanel}">
    <g:cell>
    <g:Button ui:field="selectButton" title="{constants.buttonLabel}" 
                  text="{constants.actionLabelSelect}" />
    </g:cell>
    ...
</g:HorizontalPanel>

按钮有以下css：

.gwt-Button {
    font-size: 13px;
    color: #337BB1;
    margin: 0px 10px;
    padding: 5px 7px;
    border: 1px solid #E3E3E3;      
    }

按钮标签通常有两个单词。与所有非 IE 浏览器相比，按钮面板不适合布局。每个按钮看起来都太宽了，某个按钮只显示了一部分。此外，即使我调整了视图的大小 (Ctrl + "-")，情况仍然如此，因为包含按钮的整个面板都被调整了大小。所有 FF 和 Chrome 的行为是：如果面板不适合浏览器窗口，则按钮标签会换行，并且默认情况下按钮要小得多，因此很适合标准浏览器大小。

为什么 IE 的行为不同？

调试的另一个问题是，在GWT的superDevMode和devMode中，在IE中也不会出现问题。

这怎么可能？

浏览器版本：IE8， GWT 2.5.1 版

Answer 1

试试CSS min-width Property

.gwt-Button {
   ...
   min-width: 135px;
}

你也可以试试CSS overflow Property

overflow: visible;