Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I'm developing an application on zk5.0.10 to be accessed from IE8 browsers. The application's address is configured as an intranet local site, and sites in the intranet are configured (this is necessary in order to guarantee legacy applications get displayed correctly) to be displayed in the compatibility mode.
I've tried to enforce the IE8 mode by applying a filter that establishes an X-UA-Compatible http header as IE=8. This way, when I load my zul page, I open the developer tools and see <body class="ie ie8" onbeforeunload="">; org.zkoss.zk.ui.util.Clients.evalJavaScript( "alert(document.documentMode);" ); also yields 8.
My zul does not get correctly rendered, however. Here's the difference:
It should be displayed like this:
Any suggestion?
Hi,
my excuses for this late answer. I've been further researching into the subject and making sure what the real facts are.
If I switch IE8 to standard mode the page gets rendered correctly. If I activate the compatibility view it does not, even if I submit an http header telling ie what version should it apply. The same happens with IE9: if I enable the IE7 mode it will render it incorrectly, even if I apply a filter like this:
public void doFilter( ServletRequest request, ServletResponse response, FilterChain chain ) throws IOException, ServletException {
( ( HttpServletResponse ) response ).setHeader( "X-UA-Compatible", "IE=edge" );
chain.doFilter( request, response );
}and the document.documentMode I obtain by executing Clients.evalJavaScript( "alert( document.documentMode );" ); turns out to be 9 (in other words: the browser correctly detects and interprets the X-UA-Compatible http header).
This is the zul code I'm testing
<window>
<listbox mold="paging" pageSize="5" rows="5" sizedByContent="false">
<listhead id="listHead" sizable="true">
<listheader label="Name" />
<listheader label="Brand"/>
<listheader label="Model" />
<listheader label="Price" />
</listhead>
</listbox>
<separator />
<hlayout id="box">
<label id="label0" value="You can also select by typing"/>
<combobox autodrop="true" autocomplete="true" />
<button label="Remove"/>
<button label="Edit"/>
<button label="Show document mode" onClick='org.zkoss.zk.ui.util.Clients.evalJavaScript( "alert( document.documentMode );" );' />
</hlayout>
</window>Please beware that when tested in the online zksandbox (which I guess is ZK6) the buttons at the bottom row also get rendered unaligned, although in a different way.
With kind regards
César Varona
Asked: 2012-02-14 16:46:12 +0800
Seen: 504 times
Last updated: Sep 23 '13
