GWT: проблема прозрачности Internet Explorer - PullRequest
Новая
       10

GWT: проблема прозрачности Internet Explorer

3 голосов
/ 21 апреля 2010

Этот пост касается только 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)");

Таким образом, в основном этот код должен отображать красный квадрат размером 200 на 200 пикселей (см. UnderPanel в коде) и поверх него черный прямоугольник размером 200 на 40 пикселей (см. OverPanel в коде). Однако черный прямоугольник частично просвечивает, поскольку его прозрачность установлена ​​на 20%, поэтому он должен быть красного цвета, но более темного красного цвета, чем прямоугольник, который находится под ним, так как на самом деле он является выцветшим черным элементом.

Некоторая проблема рендеринга возникает из-за последней строки кода, которая устанавливает непрозрачность содержащей AbsolutePanel равной 100% (что теоретически не должно влиять на визуальный результат). Действительно, в этом случае лежащая панель остается прозрачной, но прямо сквозь цвет фона страницы! Это как если бы панели, сидящей под ним, там вообще не было ...

Есть идеи?

Это под GWT 2.0 и IE7.

Ответы [ 3 ]

2 голосов
/ 17 декабря 2011

Просто для полноты ... последний GWT 2.4 имеет метод: 

    Style.setOpacity()

, который корректно переводится на все текущие платформы браузеров (включая ie6, ie7, ie8)

1 голос
/ 22 января 2011

Вы также можете включить IE9.js (http://code.google.com/p/ie7-js/) от Дина Эдвардса, он позволяет вам использовать свойство непрозрачности для ваших классов CSS (и многие другие интересные вещи, например, использование псевдо-селекторов!). успешно использовал его в нескольких проектах на основе GWT. Также я бы установил класс CSS (setStyleName ()) вместо установки встроенного стиля элемента пользовательского интерфейса.

1 голос
/ 03 января 2011

IE7 делает вещи немного по-другому. Попробуйте это: 

absPanel.getElement().getStyle().setProperty("msFilter",   
"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)");

Подробнее об этом можно прочитать здесь:

http://www.quirksmode.org/css/opacity.html

...