Question

有什么问题？

通过设置或取消设置“display：none”切换图像时 - 第一次看不见，但留下空间分配 - 第二次不可见

如何重现此问题？

在兼容模式下使用IE 7（或更低版本）或IE 8时，请在GIST中打开HTML： - 单击切换按钮，图像消失，但滚动仍然认为图像在那里 - 再次单击切换按钮，图像不会重新出现

我想做什么？

我正在开发一个显示大量用户数据的项目，在我们显示图标的用户数据旁边 - 基于AJAX调用动态呈现页面内容。并且有一些代码（当您选中/取消选中某些显示选项时会调用它们）使这些图标不可见/可见。用户以大型网格布局显示 - 因此表格是必需的。作为性能增强，我开始使用YUI StyleSheets使大量相同类型的图标消失/重新出现。

我想知道什么？

IE中此显示问题的根本原因是什么？

我不想知道什么？

我不想知道如何更改DOM结构来解决此问题。我已经知道删除DIV周围的虚拟表会使问题消失。此外，如果您将html直接放入content_pane元素而不动态生成它，那么问题就会消失。哦，FF和Chrome也能正常工作（我甚至需要提一下吗？）

问题演示

<html>
<head>
    <title>Stylesheet Testing</title>
    <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script>
    <script type="text/javascript">
    YUI().use("event", "stylesheet", function(Y){
        var stylesheet = new Y.StyleSheet();

        var toggletSet = true;
        Y.on("click", function() {
            if (toggletSet) {
                stylesheet.set('.myclass', {display: 'none'});
            } else {
                stylesheet.unset('.myclass', 'display');
            }
            toggletSet = !toggletSet;
        }, "#toggle");
        var html = [
                    '<table><tr><td>',
                    '<div style="overflow: auto; width: 100px; height: 60px;">',
                    '<img class="myclass" src="http://l.yimg.com/a/i/brand/purplelogo/uh/us/ydn.gif">',
                    '</div>',
                    '</td></tr></table>'
                    ];

        Y.one('#content_panel').setContent(html.join(''));
        Y.one('#toggle').set('disabled', false);
    });
    </script>
</head>
<body>
    <div id="content_panel"></div>
    <button id="toggle" disabled="disabled">toggle</button>
</body>
</html>

Answer 1

我的项目中遇到了完全相同的问题。这是浏览器缺陷，与YUI无关。

我们必须在页面上显示大量图标，并且查找和设置每个图标元素的style.display非常慢，因此我们决定使用YUI的样式表。
好处是它可以在页面首次加载时适用于IE，因此它仍然可以提高性能。如果页面加载后某些显示属性发生更改，则必须回退到慢速方法：找到所有图标元素并逐个设置style.display。

无论如何，这是我提出的，它适用于IE7和IE8兼容性视图：

_displayChange : function(className, enabled) {
    this._styleSheet.set('.' + className, 'display:' + (enabled ? '' : 'none'));
    if (Util.browserInfo.ie) {
        // find DOM elements with the className if haven't done so
        ...
        Util.each(this._domElementsLookup[className], function(el) {
            el.style.display = 'none'; //need this for the IE quirk 
            el.style.display = enabled ? '' : 'none';
        });
    }
},

上面注意我必须设置style.display两次，否则在第一次切换显示时它将无效。

Answer 2

我怀疑这是一个浏览器错误，但您可以使用YUI提交票证，我们将深入了解它。 http://yuilibrary.com/projects/yui3/newticket

为什么YUI StyleSheet在IE＆lt; = 7中没有正确切换此图像

2 个答案: