8

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

4 回答 4

6

我有同样的问题，并找到了解决方案。首先，我应该说，对于 IE9 中样式borderCollapse 等于折叠（无论它是声明为内联还是在头部）的表格中的任何行，问题都是实际的。

我的解决方案：

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

甚至缩短：

function hideRow(tableNode, rowNode, hide){
    var initValue = tableNode.style.borderCollapse;
    tableNode.style.borderCollapse = 'separate';
    rowNode.style.display = hide ? 'none' : '';
    tableNode.style.borderCollapse = initValue;
}
于 2012-09-25T13:06:04.833 回答
4

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.

于 2012-07-04T09:59:41.157 回答
1

这似乎是 IE9 中的一个错误。

更改display:none为visibility:hidden，您将看到文本不断闪烁。

我能想到的唯一想法是 IE 陷入无限循环或堆栈溢出。

抱歉，我无法提供解决方案。

于 2012-07-04T10:14:59.927 回答
0

如果隐藏 TR 是您想要的，您可以尝试以下操作：

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

这是在 IE、FF 和 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>
于 2012-07-04T11:19:50.527 回答