Question

我正在尝试让我的CSS3重新设计为GWT应用程序工作，但是当它们应用于GWT DialogBox Caption时，CSS3Pie vml对象似乎没有正确显示。此外，DialogBox或PopupPanel内的任何内容，例如GwtButton，都没有正确应用他们的CSS3Pie（即使那些相同的GwtButtons在任何地方工作都很好，但弹出）。

我的假设是， GWT操纵DOM的方式以及弹出窗口的CSS样式导致所有样式都显示。 CSS3Pie肯定正确地附加到这些元素，因为正在删除背景颜色和边框样式，并且正在添加css3-container元素。

这是应用于DialogBox的CSS

.gwt-PopupPanel,.gwt-DecoratedPopupPanel,.gwt-DialogBox,.gwt-SuggestBoxPopup
    {
    z-index: 999;
}

.gwt-PopupPanelGlass {
    background: #000;
    opacity: 0.3;
    filter: alpha(opacity = 30);
    z-index: 990;
}

.gwt-DialogBox .dialogTopCenterInner{
}

/** Copied from titled region **/
.gwt-DialogBox .Caption {
    padding: 8px 0 0 14px;
    background: #6c6d70;
    background: -moz-linear-gradient(#6c6d70, #595a5c);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6d70), color-stop(100%,#595a5c));
    background: -webkit-linear-gradient(#6c6d70, #595a5c);
    background: -o-linear-gradient(#6c6d70, #595a5c);
    background: -ms-linear-gradient(#6c6d70, #595a5c);
    background: linear-gradient(#6c6d70, #595a5c);
    height: 25px;
    border: 1px solid #4a4a4a;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    -webkit-box-shadow: inset 0 1px 1px #8e8f93;
    -moz-box-shadow: inset 0 1px 1px #8e8f93;
    box-shadow: inset 0 1px 1px #8e8f93;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: move;

    -pie-background: linear-gradient(#6c6d70, #595a5c);
    position: relative;
    behavior: url(/resources/css/PIE.htc);
}

.gwt-DialogBox .dialogContent {
    border: 1px solid #6a6a6a;
    border-top: none;
    background: #f9f9f9;
    padding: 10px;
}

这是从IE Developer Toolbar中获取的对话框生成的HTML。

<DIV style="CLIP: rect(auto,auto,auto,auto); POSITION: absolute; VISIBILITY: visible; OVERFLOW: visible; TOP: 374px; LEFT: 743px" class=gwt-DialogBox __eventBits="124"><DIV>
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR class=dialogTop>
<TD class=dialogTopLeft>
<DIV class=dialogTopLeftInner></DIV></TD>
<TD class=dialogTopCenter>
<DIV class=dialogTopCenterInner>
<css3-container style="Z-INDEX: auto; POSITION: absolute; DIRECTION: ltr; TOP: 0px; LEFT: 0px"><background style="POSITION: absolute; TOP: 0px; LEFT: 0px"><group2><?xml:namespace prefix = css3vml ns = "urn:schemas-microsoft-com:vml" /><css3vml:shape style="POSITION: absolute; WIDTH: 413px; HEIGHT: 35px; BEHAVIOR: url(#default#VML); TOP: 0px; LEFT: 0px" coordsize = "826,70" coordorigin = "1,1" fillcolor = "#6c6d70" stroked = "f" path = " m0,10 qy10,0 l816,0 qx826,10 l826,70 qy826,70 l0,70 qx0,70 x e"><css3vml:fill></css3vml:fill><css3vml:fill></css3vml:fill></css3vml:shape></group2></background><border style="POSITION: absolute; TOP: 0px; LEFT: 0px"><css3vml:shape style="POSITION: absolute; WIDTH: 413px; HEIGHT: 35px; BEHAVIOR: url(#default#VML); TOP: 0px; LEFT: 0px" coordsize = "826,70" coordorigin = "1,1" filled = "f" stroked = "t" strokecolor = "#4a4a4a" strokeweight = ".75pt" path = " m1,10 qy10,1 l816,1 qx825,10 l825,70 qy826,69 l0,69 qx1,70 x e"><css3vml:stroke></css3vml:stroke><css3vml:stroke></css3vml:stroke></css3vml:shape></border></css3-container>
<DIV class="Caption pie_first-child pie_first-child" _pieId="_208">Change Region</DIV></DIV></TD>
<TD class=dialogTopRight>
<DIV class=dialogTopRightInner></DIV></TD></TR>
<TR class=dialogMiddle>
<TD class=dialogMiddleLeft>
<DIV class=dialogMiddleLeftInner></DIV></TD>
<TD class=dialogMiddleCenter>
<DIV class="dialogMiddleCenterInner dialogContent">
    Fancy content here.
</DIV>
</TD>
<TD class=dialogMiddleRight>
<DIV class=dialogMiddleRightInner></DIV></TD></TR>
<TR class=dialogBottom>
<TD class=dialogBottomLeft>
<DIV class=dialogBottomLeftInner></DIV></TD>
<TD class=dialogBottomCenter>
<DIV class=dialogBottomCenterInner></DIV></TD>
<TD class=dialogBottomRight>
<DIV class=dialogBottomRightInner></DIV></TD></TR></TBODY></TABLE></DIV></DIV>

以下是我尝试过的一些事情：

将HTML复制并粘贴到页面中，而不是让GWT操纵DOM css3属性
使用绝对定位和自定义隐藏/显示代码 css3属性的自定义弹出窗口
应用position:relative已在其他地方修复了一些css3pie属性，但此处没有效果

有没有人成功使用GWT PopupPanel和DialogBox来使用CSS3Pie？ This project似乎表明某人有。我错过了什么？

Answer 1

我已经将问题跟踪到PopupPanel显示/隐藏自身的方式，这会影响其他子类（如DialogBox）。它使用CSS属性“visibility”来切换隐藏和显示自身。因此，它会使自己隐藏visibility:hidden;并显示visibility:visible;。

不幸的是，这与Internet Explorer事件模型不相称。当父级的visibility css属性发生更改时，Internet Explorer不会通知其子级有关属性更改事件的信息。 CSS3Pie将onPropertyChange处理程序添加到其使用的元素中，并期望当样式更改时，它将被通知。由于Internet Explorer不会将事件传播给孩子，因此CSS3Pie无法知道更改，也无法更新其渲染。

您可以通过以下方式手动覆盖：

创建一个带有圆角div的DialogBox
致电DialogBox#show#
应显示对话框，但缺少CSS3圆边框
打开Internet Explorer开发人员工具（按F12）
刷新IE开发人员工具（花了一些时间来弄清楚这一点）
检查圆角边框，取消选中“behavior”属性
CSS3Pie分离，应出现非圆形边框
重新启用“行为”属性
固定！ CSS3Pie重新呈现显示值

您可以在PopupPanel上调用此静态方法，以使CSS3Pie重新呈现其所有子项，并一劳永逸地解决问题。

public static void resetChildrenCss3PieBehaviour(final Element e) {
    // Only run this for IE 8 and 9
    String userAgent = Navigator.getUserAgent().toLowerCase();
    if (userAgent.contains("msie")) {
        NodeList<Node> childNodes = e.getChildNodes();
        int length = childNodes.getLength();
        for (int i = 0; i < length; i++) {
            Node node = childNodes.getItem(i);
            if (node instanceof Element) {
                final Element child = (Element) node;
                // Recursive part happens here
                resetChildrenCss3PieBehaviour(child);
            }
        }

        // Refresh the CSS3Pie behavior
        e.getStyle().setProperty("behavior", "none !important");
        Scheduler.get().scheduleDeferred(new Command() {
            @Override
            public void execute() {
                e.getStyle().setProperty("behavior", Css3Pie.getPieCssProp());
            }
        });

    }
}

对于您的代码，如果您可以使用display:none;而不是visibility:hidden;，则IE可以很好地处理事件传播，并且不需要这种黑客攻击。

Answer 2

我覆盖对话框面板自己的样式以使其透明，并将我的样式（常规和PIE）添加到dialogMiddleCenterInner div中的面板。

为什么GWT PopupPanels和DialogBox不像CSS3Pie？

2 个答案: