tr display none crashes ie9

Question

tr display none crashes ie9

Sak*_*han 8 javascript css internet-explorer-9

这个代码崩溃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>

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Xru*_*met 6

我有同样的问题,并找到了解决方案.首先,我应该说问题是实际的,表格中的任何一行都有样式borderCollapse等于崩溃(无论是内联还是头部),在IE9中.

我的解决方案

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

Run Code Online (Sandbox Code Playgroud)

甚至缩短:

function hideRow(tableNode, rowNode, hide){
    var initValue = tableNode.style.borderCollapse;
    tableNode.style.borderCollapse = 'separate';
    rowNode.style.display = hide ? 'none' : '';
    tableNode.style.borderCollapse = initValue;
}

Run Code Online (Sandbox Code Playgroud)

Answer 2

Den*_*ret 4

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

一旦它不再显示，您的鼠标就不再悬停，因此它必须再次可见。这意味着鼠标位于其上方。这意味着它必须隐藏...这意味着它必须可见...等等。

否则说：该规范没有意义。

话虽这么说，这个错误确实很烦人，因为以下代码也会使 IE9 崩溃：

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	13 年，5 月前
查看次数：	3491 次
最近记录：	13 年，2 月前