Steps to Reproduce

run zul file:

<zk>
	<div style="width: 400px; border: 1px solid Black;">
		<vlayout style="background-color: OrangeRed;" height="500px" width="300px" spacing="0">
			<forEach begin="0" end="10">
				<div style="background-color: PaleGreen;">above</div>
			</forEach>
			<div style="background-color: BurlyWood;" vflex="1">vflex</div>
			<forEach begin="0" end="10">
				<div style="background-color: LightBlue;">below</div>
			</forEach>
		</vlayout>
	</div>
	IE9/10/11 have an empty margin at the bottom, depending on the number of divs around the vflex element
</zk>

Current Result

IE 9-11 produce a red area below the vlayout children of unused space (the height of the unused space increases with the number of divs around the vflex div)

Expected Result

The middle div using vflex should increase in size to occupy all available area

Debug Info

IE computes a non integer height (18.4px) for the divs above and below the vflex div resulting in a rounding error during vflex calculation

Root Cause

https://github.com/zkoss/zk/blob/v8.0.5/zul/src/archive/web/js/zul/box/Layout.js#L305
cp.offsetHeight returns an integer value
the compensation to add a full pixel for non IE>8 results in a rounding error of 0.6px per div

using cp.getBoundingClientRect().height will return the precise value

proposed fix:

hgh -= (isIssueComp && zk.ie == 8 ? cp.offsetHeight : cp.getBoundingClientRect().height)  + zkxc.marginHeight();