Question

此代码崩溃ie9，因为我在我的代码中遇到此问题..任何工作都将受到赞赏..这不是以前版本的ie ...问题..

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

即使使用onclick事件也会使浏览器崩溃..请尝试以下操作.. 将光标移动到此处

    <script type="text/javascript">
    function HideThis()
    {
        document.getElementById('secondtr').style.display = 'none';
    }
</script>

Answer 1

我遇到了同样的问题，并找到了解决方案。首先，我应该说这个问题对于表格中的任何一行都是实际的，其中样式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;
}

Answer 2

IE9中存在一个错误，但css规则在逻辑上是不可判定的：

只要它不再显示，您的鼠标就不会再悬停，所以它必须再次可见。这意味着鼠标就在它上面。这意味着它必须被隐藏......这意味着它必须是可见的......等等。

另有说法：规范没有意义。

这就是说，这个bug真的很烦人，因为下面的代码也崩溃了IE9：

$(window).ready(function(){
    $('#secondtr').mouseenter(function(){
         $('#secondtr').hide();
    });
});

但如果将事件处理程序放在span上（例如），则不会发生这种情况。因此，我建议您更改HTML，以避免隐藏您在其上进行悬停检测的tr。

Answer 3

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

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

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

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

Answer 4

如果隐藏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>

tr display none crashes ie9

4 个答案: