This code crashes ie9 as i am having this problem in my code .. any work around will be appreciated .. This is not a problem with the previous versions of ie .. Thanks ..
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>
<table style="border-collapse: collapse">
<tr id="firsttr">
<td colspan="2"></td>
<td></td>
</tr>
<tr id="secondtr">
<td></td>
<td style="border: 1px solid #D2D2D2">Move cursor here</td>
<td></td>
</tr>
</table>
</body>
<style type="text/css">
#secondtr:hover {
display: none;
}
</style>
</html>
Even using onclick event crashes the browser .. try the following .. Move cursor here
<script type="text/javascript">
function HideThis()
{
document.getElementById('secondtr').style.display = 'none';
}
</script>
I have the same problem, and have found a solution. First of all I should say that the problem is actual for any row in table with style borderCollapse equal to collapse (no matter if it is declared inline or in head) in IE9.
My solution:
function hideRow(tableNode, rowNode, hide){
if(hide){
if(window.navigator.userAgent.search('MSIE 9.0') != -1){
var initValue = tableNode.style.borderCollapse;
tableNode.style.borderCollapse = 'separate';
rowNode.style.display = 'none';
tableNode.style.borderCollapse = initValue;
}else{
rowNode.style.display = 'none';
}
}else{
rowNode.style.display = '';
}
}
Or even shorten:
function hideRow(tableNode, rowNode, hide){
var initValue = tableNode.style.borderCollapse;
tableNode.style.borderCollapse = 'separate';
rowNode.style.display = hide ? 'none' : '';
tableNode.style.borderCollapse = initValue;
}
There is a bug in IE9, but the css rule is logically undecidable :
As soon as it isn't displayed any more, your mouse isn't hovering any more so it must be visible again. Which means the mouse is over it. Which means it must be hidden... which means it must be visible... etc.
Said otherwise : the specification doesn't make sense.
This being said, this bug is really annoying as the following code crashes IE9 too :
$(window).ready(function(){
$('#secondtr').mouseenter(function(){
$('#secondtr').hide();
});
});
But it doesn't happen if you put your event handler on a span
(for example). So I suggest you change your HTML in order to avoid hidding the tr
on which you have a hovering detection.
This seems to be a bug in IE9.
Changing display:none
to visibility:hidden
, you will see the text flash continuously.
The only think I can think of is the IE gets stuck in an infinite loop or a stackoverflow.
Sorry, that I can't provide a solution.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With