Question

包含包含表格的表格的div的html段：

<!DOCTYPE html>
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" -->
<head>
    <style type="text/css">
    #content{position:relative}
    table {border-color:#999;border-style:solid}
    </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
    <button onclick="javascript:$('.content-panel').toggle();">Toggle</button>
    <div id="content">
        <div class="content-panel">
            <form action='' method='post'>
                <select> 
                    <option>a </option>
                </select>

                <table>
                    <tr><td>ABCDEF</td></tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>

切换按钮应该隐藏表单及其嵌套表，但在IE8下不会这样做。（版本8.0.60001）表单内容被隐藏，但表边框继续显示，并保留其大小。它与标准模式有关;它以怪癖模式消失。

有人有解决方法吗？

这个示例页面减少了大约我可以减少它。如果我删除选择或任何一个div，问题就会消失。必须存在select，并且表格需要嵌套在表单中，因为它将包含表单元素。

页面本身位于： http://dev.rdbhost.com/rdbadmin/mainProbDemo.html

我之前使用过于简化的示例发布了此问题，该示例无法重现。谢谢你，如果你看了它。

Answer 1

如果只是隐藏不起作用，

http://api.jquery.com/detach/可能对你有用 - 它会从dom中删除该元素，但保存它以便你可以重新插入它（使用http://api.jquery.com/append/或http://api.jquery.com/appendTo/）。您也可以尝试将可见性css属性$(".content-panel").css("visibility","hidden");设置为附加度量（请注意，这意味着该元素仍会占用空间，另请参阅http://www.w3schools.com/css/pr_class_visibility.asp）（编辑：还原为$(".content-panel").css("visibility","visible"); ）。最后但并非最不重要的，你永远不会知道 - 也许只是使用show(0);和hide(0);工作，并且切换在某种程度上是不可能的 - 不太可能，然后我再次认为墨菲适用于这种情况。

Answer 2

为什么你的onclick处理程序中有javascript：schema声明？

<button onclick="$('.content-panel').toggle();">Toggle</button>

Answer 3

使用附加表包装整个表单元素是否可以？像这样：

<!DOCTYPE html>
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" -->
<head>
    <style type="text/css">
    #content{position:relative}
    .inner {border-color:#999;border-style:solid}
    </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
    <button type="button" onclick="javascript:$('.content-panel').toggle();">Toggle</button>
    <div id="content">
        <div class="content-panel">
            <form action='' method='post'>
                <table>
                    <tr>
                        <td>
                            <select> 
                                <option>a </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table class="inner">
                                <tr><td>ABCDEF</td></tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>

或者只是将表单下的所有元素添加到您拥有的表中：

    <form action='' method='post'>
            <table>
                <tr>
                    <td>
                        <select> 
                            <option>a </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        ABCDEF
                    </td>
                </tr>
            </table>
    </form>

如何在IE8下隐藏jQuery中的嵌套表单

3 个答案: