tr display none crashes ie9

前端未结

关注

 4  1176

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 ..

相关标签:

4条回答

一向

2020-12-18 00:09

If hiding the TR is what you want, you could try something like:

#secondtr:hover {
  height: 0px;
  padding: 0px;
  margin: 0px;
  border: 0px;
  font-size: 0px;
}

Here's the the complete code that worked for me on IE , FF and Safari:

<?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>
<TITLE> BLAH</TITLE>
<style type="text/css">
#secondtr:hover, #secondtr:hover .secondTD  {
    height: 0px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    font-size: 0px;
}
.secondTD{
    border: 1px solid #D2D2D2;
}

</style>
</head>
<body>
<table style="border-collapse: collapse">
    <tr id="firsttr">
        <td colspan="2"> </td>
        <td></td>
    </tr>
    <tr id="secondtr">
        <td></td>
        <td  class="secondTD">Move cursor here</td>
        <td></td>
    </tr>
</table>
</body>
</html>

0 讨论(0)

小蘑菇

2020-12-18 00:30
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
半阙折子戏

2020-12-18 00:30

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

执笔经年

2020-12-18 00:31

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;
}

0 讨论(0)