ie9崩溃现象当js设置tr元素样式为display:none-前端开发

问题描述：

问题描述：

在使用ie9浏览器浏览网页时，当使用JS代码修改某个tr元素的display属性时，页面会出现崩溃现象。

原因分析：

IE9浏览器中存在一个叫做“样式未提前计算的bug”，当某个元素的display属性被修改为none时，该元素的后代元素的样式计算不会被首先执行，导致后代元素的样式计算出现异常，最终导致浏览器崩溃。

攻略：

针对这个问题，我们可以采取以下方案来解决：

尽可能减少使用display:none属性

在开发过程中，尽可能减少使用display:none属性，而是使用visibility:hidden属性来隐藏元素。这样可以避免IE9浏览器出现的“样式未提前计算的bug”。

避免使用JS代码来设置元素的display属性

如果必须要使用display:none属性，我们可以采用其他方式来设置元素的display属性，例如在CSS样式表中设置初始display属性或者在页面的HTML代码中设置初始display属性。这样可以避免使用JS代码来设置元素的display属性，从而避免IE9浏览器崩溃现象。

示例说明：

我们可以看一个简单的例子来更好的理解这个问题：

<!DOCTYPE html>
<html>
<head>
    <title>IE9崩溃示例</title>
    <style type="text/css">
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
        </tr>
        <tr id="target">
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
        </tr>
    </table>
    <script type="text/javascript">
        // 使用JS代码设置目标元素的display属性为none
        document.getElementById("target").style.display = "none";
    </script>
</body>
</html>

在IE9浏览器中打开这个页面，会发现页面出现崩溃现象。这是因为在使用JS代码设置目标元素的display属性为none时，目标元素后代元素的样式计算出现异常，导致IE9浏览器崩溃。

我们可以将代码中的JS代码修改为以下方式：

    <!-- 在CSS样式表中设置目标元素的初始display属性 -->
    <style type="text/css">
        #target {
            display: none;
        }
    </style>

这样就可以避免使用JS代码设置目标元素的display属性，从而避免了IE9浏览器崩溃现象。

另外，我们还可以使用visibility:hidden属性来隐藏元素，避免使用display:none属性。例如：

    <!-- 使用visibility:hidden属性来隐藏目标元素 -->
    <style type="text/css">
        .hidden {
            visibility: hidden;
        }
    </style>
    <tr id="target" class="hidden">
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>

这样也可以避免IE9浏览器崩溃现象。

基础教程推荐