css - GWT : Internet Explorer transparency issue

Question

这篇文章只涉及 IE。以下代码的最后一行导致了问题。

    int width = 200;
    int height = 200;
    int overHeight = 40;

    AbsolutePanel absPanel = new AbsolutePanel();
    absPanel.setSize(width + "px", height + "px");      

    SimplePanel underPanel = new SimplePanel();
    underPanel.setWidth(width + "px");
    underPanel.setHeight(height + "px");
    underPanel.getElement().getStyle().setBackgroundColor("red");           

    SimplePanel overPanel = new SimplePanel();
    overPanel.setWidth(width + "px");
    overPanel.setHeight(overHeight + "px");
    overPanel.getElement().getStyle().setBackgroundColor("black");
    //Setting the IE opacity to 20% on the black element in order to obtain the see through effect.
    overPanel.getElement().getStyle().setProperty("filter", "alpha(opacity=20)"); 

    absPanel.add(underPanel, 0, 0);
    absPanel.add(overPanel, 0, 0);

    RootPanel.get("test").add(absPanel);

    //The next line causes the problem. 
    absPanel.getElement().getStyle().setProperty("filter", "alpha(opacity=100)");

基本上这段代码应该显示一个 200px x 200px 的红色正方形(请参阅代码中的 underPanel)，并在其顶部显示一个 200px x 40px 的黑色矩形(请参阅代码中的 overPanel)。然而，黑色矩形部分透明，因为它的透明度设置为 20%，因此它应该显示为红色，但比下面的矩形更深的红色，因为它实际上是一个褪色的黑色元素。

由于最后一行代码将包含的 AbsolutePanel 的不透明度设置为 100%(理论上应该不会影响视觉结果)，因此会出现一些渲染问题。事实上，在那种情况下，位于上方的面板仍然保持透明，但直接透过页面的背景颜色!就好像坐在下面的面板根本不存在一样......

有什么想法吗？

这是在 GWT 2.0 和 IE7 下。

Answer 1

只是为了完整性......最新的 GWT 2.4 有方法:

    Style.setOpacity()

在当前所有浏览器平台(包括 ie6、ie7、ie8)上都可以正确翻译