I create a simple Sample to show the problem in IE 10. After Site loads the iframe has 100 % width of the table which is also set to 100% width. Click button "Hide" to hide the table, after that click the button "Show" to show the table again. Now the problem is that the width of the iframe is not 100% anymore.
In IE 9 this sample works correct. Can anybody help me with this problem. Or is this an known issue of IE 10 ?
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><script type="text/javascript">
function HideMe() {
document.getElementById('MyTable').style.display = 'none';
}
function ShowMe() {
document.getElementById('MyTable').style.display = 'block';
}
</script><body><table id="MyTable" style="border: medium solid #FF00FF; width: 100%;"><tr><td><iframe id="MyIFrame" src="http://www.microsoft.com" style="border-style: none; width: 100%"></iframe></td></tr></table><input id="Hide" type="button" onclick="HideMe();" value="Hide me" /><input id="Show" type="button" onclick="ShowMe();" value="Show me" /></body></html>