Question

我一如既往地遇到Internet Explorer和CSS的问题。我正在使用GWT和DockPanel创建一个带有标题，主要部分和页脚的网站，所有VerticalPanel都在运行期间添加不同的复合材料/元素。

    RootPanel rootPnl = RootPanel.get("rootContainer");

    final DockPanel dockPanel = new DockPanel();
    dockPanel.setWidth("100%");
    dockPanel.setHeight("100%");

    rootPnl.add(dockPanel);

    final VerticalPanel headerPanel = new VerticalPanel();
    headerPanel.setSpacing(10);
    headerPanel.setStyleName("gwt-HeaderPanel");
    dockPanel.add(headerPanel, DockPanel.NORTH);
    dockPanel.setCellHeight(headerPanel, "100px");

    final VerticalPanel mainPanel = new VerticalPanel();
    mainPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    mainPanel.setStyleName("gwt-MainPanel");
    dockPanel.add(mainPanel, DockPanel.CENTER);

    final VerticalPanel footerPanel = new VerticalPanel();
    dockPanel.add(footerPanel, DockPanel.SOUTH);
    dockPanel.setCellHeight(footerPanel, "150px");

如您所见，我添加了CSS样式。主面板看起来像这样：

.gwt-MainPanel {
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: #353334;
    -moz-box-shadow: 0 2px 2px 0px #232323;
    -webkit-box-shadow: 0 2px 2px 0px #232323;
    box-shadow: 0 2px 2px 0px #232323;
}

所以我将高度设置为100％的中心单元格，这可以按预期使用Firefox，但Internet Explorer完全忽略它。如何让IE垂直填充DockPanel的中心部分？我已经搜索过它，并试图将不同的DOCTYPE添加到html页面。

请查看实时示例here。

谢谢

Answer 1

您在VerticalPanel的中间设置了DockLayout的100％高度，但您还没有将中间单元格高度设置为100％。试试：

dockPanel.setCellHeight(mainPanel, "100%");

无论如何，使用表格和百分比可能会导致细微的问题，而这些问题通常需要您自己处理。总是问自己“100％的是什么？”。

另外，引用DockPanel中的javadoc：

此小部件在标准模式下具有限制，这在quirks模式中不存在。 DockPanel中包含的子窗口小部件无法使用百分比进行调整。将子窗口小部件的高度设置为100％不会导致子项填充可用高度。

如果您需要解决这些限制，请改用DockLayoutPanel，但要明白它不是替代此类的替代品。它需要标准模式，并且最容易在RootLayoutPanel（而不是RootPanel）下使用。

使用<!DOCTYPE html>将页面设置为标准模式，这意味着这将无法正常工作，并且在怪癖模式下，您必须自己进行实验。

还要考虑使用基于Layout的方法，如javadoc所建议的那样。由于您对整个页面使用单个div（rootContainer），因此使用它应该是轻松的。请参阅https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#LayoutPanels。

Answer 2

不要混淆布局面板和非布局面板。如果您使用的是布局面板，请不要使用垂直面板和绝对面板。请查看此question及其接受的答案以获取更多详细信息。

IE GWT：DockPanel中心组件100％高度样式被忽略

2 个答案: