Question

示例代码：

<html>
  <head>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
  </head>
  <body>

    <table border="1" style="width:100%">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
        </tr>
        <tr>
            <td colspan="4" >
                <div id="target">TOGGLE TEXT!!</div>
            </td>
        </tr>
    </table>

    <input type="button" value="show/hide" onclick="toggleHidden();" />

    <script type="text/javascript">

        function toggleHidden() { 

            $('#target').toggle("blind", {}, 200, null);
        }

    </script>

  </body>
</html>

此代码使用JQuery UI的切换功能隐藏并显示td中的div（与show和hide函数的结果相同）。

在FireFox中，这很有效，但在IE中，所有列都会在“切换效果”期间调整大小。有谁知道IE为什么会这样？如果我可以在此代码中执行任何操作来防止它发生？

Answer 1

使用slideToggle代替切换或隐藏/显示实际解决了问题！

Answer 2

我遇到过类似的问题。尝试两件事：

1）给表格一个绝对宽度，以像素为单位，例如500px的

2）尝试在div之后在包含目标div的TD中放置一个不间断的空格 ，以防止浏览器在没有内容时折叠单元格：

<div id="target">TOGGLE TEXT!!</div> 

在IE中使用JQuery UI切换时，列调整大小

2 个答案: