GWT DockPanel在Chrome中格式错误

Question

GWT DockPanel在Chrome中格式错误

htmlcssgwtdockpanel

3

我正在构建一个部门网站，但在使用Chrome时遇到了一个独特的问题，我的停靠面板调整大小不正确。

当我更改停靠面板中心的信息以使其变得更高时，它会正确扩展，但永远不会重新调整大小以适应更短的内容。它在Firefox、IE和Spartan中表现完美，但在Chrome中不行。似乎它正在设置中心区域的底部填充而不是调整元素大小。

这里是在imgur上展示三张图片的链接：

在imgur上查看图片

这是创建中心容器的代码:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>
    </ui:style>


    <g:HTMLPanel>
        <g:DockPanel styleName="my-DockPanel">
            <g:Dock direction="NORTH">
                <g:HorizontalPanel width="750px" styleName="page-header">
                    <g:cell horizontalAlignment="ALIGN_LEFT">
                        <g:HTML>

                        </g:HTML>
                    </g:cell>
                    <g:cell horizontalAlignment="ALIGN_CENTER">
                        <g:Image url="Resources/Images/CSDepartment_Banner.gif" />
                    </g:cell>
                </g:HorizontalPanel>
            </g:Dock>

            <g:Dock direction="SOUTH">
                <g:HorizontalPanel styleName="page-footer">
                    <g:HTML>

                    </g:HTML>

                    <g:HTML>
                        <DIV align="center">
                            The Department of Computer Science
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />

                            Last modified: July 1, 2015
                            <br />
                            <br />
                        </DIV>
                    </g:HTML>

                    <g:cell horizontalAlignment="ALIGN_RIGHT">
                        <g:HTML>

                        </g:HTML>
                    </g:cell>
                </g:HorizontalPanel>
            </g:Dock>

            <g:Dock direction="EAST">
                <g:VerticalPanel width="100%" height="100%">
                </g:VerticalPanel>
            </g:Dock>

            <g:Dock direction="WEST">
                <g:VerticalPanel width="100%" height="100%">
                    <g:Label>

                    </g:Label>
                </g:VerticalPanel>
            </g:Dock>

            <g:Dock direction="NORTH">
                <g:HorizontalPanel width="100%">
                    <g:cell horizontalAlignment="ALIGN_CENTER">
                        <g:MenuBar ui:field="navigationBar"></g:MenuBar>
                    </g:cell>
                </g:HorizontalPanel>
            </g:Dock>

            <g:Dock direction="CENTER" width="1260px" height="100%">
                <g:ScrollPanel height="auto">
                    <g:DeckPanel ui:field="deckPanel" height="100%">

                    </g:DeckPanel>
                </g:ScrollPanel>
            </g:Dock>
        </g:DockPanel>
    </g:HTMLPanel>
</ui:UiBinder>

这里是整个页面的CSS：

@CHARSET "ISO-8859-1";

/**
 * This file is linked through the index.html file
 */
body {
    /*background-color: #CCCCCC !important;*/
    background-color: #fff5ec;
    font-family: "Garamond Premier Pro", "Myriad Pro", "Verdana",
        "Times New Roman";
}

/*Adds a drop shadow at the top of the page and stays there.*/
body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
    z-index: 100;
}

.my-dockPanel {
    margin: 0;
    padding: 0;
}

.my-dockPanel {
    margin: 0px;
    padding: 0px;
}

.my-DockPanel td {
    padding: 0px;
    margin: 0px;
}

.my-DockPanel {
    height: 100%;
    width: 100%;
    border-spacing: 0px;
    font-color: white;
}

.page-footer {
    height: auto;
    width: 1260px;
    background-color: #003366;
    padding: 0px;
    margin: auto;
    color: #FFF;
}

.page-header {
    height: 100px;
    /*  display: block; */
    margin-left: auto;
    margin-right: auto;
}

.blog-title {
    font-weight: bold;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    background: #555555;
}

.blog-panel {
    border-top: 1px solid black;
    padding: 2px;
    margin-bottom: 6px;
}

.my-ScrollPane {
    width: auto;
    padding: 0px 0px 0px 0px;
    min-height: 641px;
}

.gwt-MenuBar {
    cursor: default;
}

.gwt-MenuBar .gwt-MenuItem {
    cursor: default;
}

.gwt-MenuBar .gwt-MenuItem-selected {
    /*   background: #666; */
    background: #335685;
    color: #0cf;
}

.gwt-MenuBar-horizontal {
    /*   background: #222222; */
    background: #003366;
    border-radius: 55px 55px 0px 0px;
    -moz-border-radius: 55px 55px 0px 0px;
    -webkit-border-radius: 55px 55px 0px 0px;
    border: 1px solid #000000;
}

.gwt-MenuBar-horizontal .gwt-MenuItem {
    padding: 0px 10px;
    vertical-align: bottom;
    font-weight: bold;
    color: #E0E0E0;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
}

.gwt-MenuBar-horizontal .gwt-MenuItemSeparator {
    width: 1px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-left: 1px solid #bec7cc;
    background: #000;
}

.gwt-MenuBar-horizontal .gwt-MenuItemSeparator .menuSeparatorInner {
    width: 1px;
    height: 1px;
    background: #000;
}

.gwt-MenuBar-vertical {
    margin-top: -5px;
    margin-left: 0px;
    padding-left: 2px;
    /*  background: #4D4D4D; */ /*background: #194775;*/
    background: #003366;
    color: #E0E0E0;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    opacity: 0.9;
}

.gwt-MenuBar-vertical table {
    border-collapse: collapse;
}

.gwt-MenuBar-vertical .gwt-MenuItem {
    padding: 4px 14px 4px 1px;
}

.gwt-MenuBar-vertical .gwt-MenuItemSeparator {
    padding: 2px 0px;
}

.gwt-MenuBar-vertical .gwt-MenuItemSeparator .menuSeparatorInner {
    height: 1px;
    padding: 0px;
    border: 0px;
    border-top: 1px solid #bec7cc;
    background: #222;
    overflow: hidden;
}

.gwt-MenuBar-vertical .subMenuIcon {
    padding-right: 4px;
}

.gwt-MenuBar-vertical .subMenuIcon-selected {
    /*  background: #666; */
    background: #335685;
}

.gwt-MenuBarPopup {
    margin: 0px 0px 0px 3px;
}

.gwt-MenuBarPopup .menuPopupTopCenter {
    background: url(images/hborder.png) 0px -12px repeat-x;
}

.gwt-MenuBarPopup .menuPopupBottomCenter {
    background: url(images/hborder.png) 0px -13px repeat-x;
    -background: url(images/hborder_ie6.png) 0px -13px repeat-x;
}

.gwt-MenuBarPopup .menuPopupMiddleLeft {
    background: url(images/vborder.png) -12px 0px repeat-y;
    -background: url(images/vborder_ie6.png) -12px 0px repeat-y;
}

.gwt-MenuBarPopup .menuPopupMiddleRight {
    background: url(images/vborder.png) -13px 0px repeat-y;
    -background: url(images/vborder_ie6.png) -13px 0px repeat-y;
}

.gwt-MenuBarPopup .menuPopupTopLeftInner {
    width: 5px;
    height: 5px;
    zoom: 1;
}

.gwt-MenuBarPopup .menuPopupTopRightInner {
    width: 8px;
    height: 5px;
    zoom: 1;
}

.gwt-MenuBarPopup .menuPopupBottomLeftInner {
    width: 5px;
    height: 8px;
    zoom: 1;
}

.gwt-MenuBarPopup .menuPopupBottomRightInner {
    width: 8px;
    height: 8px;
    zoom: 1;
}

.gwt-MenuBarPopup .menuPopupTopLeft {
    background: url(images/corner.png) no-repeat 0px -36px;
    -background: url(images/corner_ie6.png) no-repeat 0px -36px;
}

.gwt-MenuBarPopup .menuPopupTopRight {
    background: url(images/corner.png) no-repeat -5px -36px;
    -background: url(images/corner_ie6.png) no-repeat -5px -36px;
}

.gwt-MenuBarPopup .menuPopupBottomLeft {
    background: url(images/corner.png) no-repeat 0px -41px;
    -background: url(images/corner_ie6.png) no-repeat 0px -41px;
}

.gwt-MenuBarPopup .menuPopupBottomRight {
    background: url(images/corner.png) no-repeat -5px -41px;
    -background: url(images/corner_ie6.png) no-repeat -5px -41px;
}

* html .gwt-MenuBarPopup .menuPopupTopLeftInner {
    width: 5px;
    height: 5px;
    overflow: hidden;
}

* html .gwt-MenuBarPopup .menuPopupTopRightInner {
    width: 8px;
    height: 5px;
    overflow: hidden;
}

* html .gwt-MenuBarPopup .menuPopupBottomLeftInner {
    width: 5px;
    height: 8px;
    overflow: hidden;
}

* html .gwt-MenuBarPopup .menuPopupBottomRightInner {
    width: 8px;
    height: 8px;
    overflow: hidden;
}

.blog_image {
    padding: 1px;
    margin: 0px 20px 0px 20px;
    border: 0px solid #021a40;
    /*  width:300px; */
/*  height:auto; */
}

.staff-image {
    padding: 1px;
    margin: 0px 20px 0px 0px;
    border: 0px solid #021a40;
    width: auto;
    height: 200px;
}

.staff-information {
    width: 1260px;
    height: 230px;
    /*  border: 20px solid #021a40; */ /*   margin: 0px 0px 25px 0px; */
    border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border-top: 2px solid #000000;
    border-left: 2px dashed #000000;
    border-right: 2px dashed #000000;
}

.staff-information-west {
    /*  background-color: #000000; */
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    width: 315px;
}

.staff-information-east {
    margin-left: auto;
    margin-right: auto;
    width: 315px;
    horizontal-align: left;
}

.featured-item-1 {
    border-left: 3px solid #003366;
    border-top: 3px solid #003366;
}

.featured-item-2 {
    border-left: 3px solid #003366;
    border-right: 3px solid #003366;
    border-top: 3px solid #003366;
}

.featured-item-3 {
    border-right: 3px solid #003366;
    border-top: 3px solid #003366;
}

.featured-title {
    width: 406px;
    text-transform: uppercase;
    padding-left: 10px;
}

.featured_image {
    /*  padding-left: 10px; */ /*   margin: 0px 0px 0px 10px; */
    width: 130px;
    height: 130px;
    -webkit-box-shadow: 10px 10px 20px 1px rgba(0, 51, 102, 1);
    -moz-box-shadow: 10px 10px 20px 1px rgba(0, 51, 102, 1);
    box-shadow: 10px 10px 20px 1px rgba(0, 51, 102, 1);
}

.featured-body {
    width: 216px;
    height: auto;
    font-size: 15px;
    padding-left: 15px;
}

.myButton {
    -moz-box-shadow: inset 0px 1px 0px 0px #7a8eb9;
    -webkit-box-shadow: inset 0px 1px 0px 0px #7a8eb9;
    box-shadow: inset 0px 1px 0px 0px #7a8eb9;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad
        ), color-stop(1, #5972a7));
    background: -moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
    background: -webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
    background: -o-linear-gradient(top, #637aad 5%, #5972a7 100%);
    background: -ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
    background: linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad',
        endColorstr='#5972a7', GradientType=0);
    background-color: #637aad;
    border: 1px solid #314179;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 28px;
    font-weight: bold;
    padding: 32px 76px;
    text-decoration: none;
}

.myButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7
        ), color-stop(1, #637aad));
    background: -moz-linear-gradient(top, #5972a7 5%, #637aad 100%);
    background: -webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);
    background: -o-linear-gradient(top, #5972a7 5%, #637aad 100%);
    background: -ms-linear-gradient(top, #5972a7 5%, #637aad 100%);
    background: linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5972a7',
        endColorstr='#637aad', GradientType=0);
    background-color: #5972a7;
}

.myButton:active {
    position: relative;
    top: 1px;
}

.html-clicked {
    background: url("Resources/Images/Widgets/things.png") repeat scroll 0 0
        transparent;
    height: 68px;
    list-style: none outside none;
    margin: 0;
    line-height: 63px;
    padding-left: 25px;
    color: #fff;
    font-family: georgia;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}

.html-unclicked {
    background: url("Resources/Images/Widgets/things.png") repeat scroll 0
        -66px transparent;
    height: 68px;
    list-style: none outside none;
    margin: 0;
    line-height: 63px;
    padding-left: 25px;
    color: #23438a;
    font-family: georgia;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}

这是我推向生产环境的最后一个主要问题（除了制作新的图像）。我已经在这个问题上打转了3天，现在终于放弃了。

- Joshua Smith

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joshua Smith · Accepted Answer

好的，我搞定了，但引起了另一个问题，我不得不修复它。上面的整个问题都与我的CSS .my-DockPanel有关。

之前：

.my-DockPanel {
    height: 100%;
    width: 100%;
    border-spacing: 0px;
    font-color: white;
}

之后：

.my-DockPanel {
    height: auto;
    width: 100%;
    border-spacing: 0px;
    font-color: white;
}

这造成了某些页面向左滑动的新问题，但我所需做的就是设置它们的宽度为静态。问题解决了！