1. ホーム
  2. 質問と答え
  3. YUIスタイルシートがIE <= 7でこの画像を正しく切り替えるのはなぜですか？

YUIスタイルシートがIE <= 7でこの画像を正しく切り替えるのはなぜですか？

2011-04-28 9 views
0

問題点は何ですか？YUIスタイルシートがIE <= 7でこの画像を正しく切り替えるのはなぜですか？

あなたが「表示：なし」に設定または設定解除することで画像を切り替える - それは目に見えない行く初めて、しかし、スペースを残しが を割り当てられた - それが再現する方法

見えになりません。二度目に問題？

GISTでHTMLを開いて、互換モードでIE 7（以下）またはIE 8を使用して： - トグルボタンをクリックして、画像が消えますが、スクロールは静止画が があると考えて - クリックトグルボタンを再度、画像は

私が行うには何をしようとしていますが再表示されませんか？

私は大量のユーザーデータを表示するプロジェクトに取り組んでいます。ユーザーデータの横にはアイコンが表示されます。ページのコンテンツはAJAX呼び出しに基づいて動的にレンダリングされます。これらのアイコンを非表示/非表示にするコードがあります（表示オプションをオン/オフにすると呼び出されます）。ユーザーは大きなグリッドレイアウトで表示されるため、テーブルが必要でした。パフォーマンスの向上として、YUIスタイルシートを使用して、同じタイプの多数のアイコンを消滅/再表示させるようになりました。

は、私が知って何をしたいですか？

IEでこの表示の問題への根本的な原因は何ですか？

は、私が知って何をしたくないですか？

私はこの問題を解決するために、DOM構造を変更する方法を知っている必要はありません。私はすでにDIVの周りのダミーテーブルを取り除くことが問題を遠ざけることを知っています。また、動的に生成せずにcontent_pane要素に直接htmlを置くと、そこにも問題がなくなります。ああおよび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>

出典

2011-04-28 codefactor

答えて

1

私は私のプロジェクトでは正確に同じ問題を抱えていました。これはブラウザの欠陥であり、YUIとは関係ありません。

ページに多数のアイコンを表示する必要があり、アイコン要素ごとにstyle.displayを見つけて設定するのが非常に遅いため、YUIのスタイルシートを使用することにしました。
良いことは、ページが最初に読み込まれたときにIEで動作することです。そのため、パフォーマンスが向上します。ページが読み込まれた後に一部の表示プロパティが変更された場合は、すべてのアイコン要素を見つけてstyle.displayを1つずつ設定するといった、ゆっくりとしたアプローチに戻っていく必要があります。

とにかく、これは私が思い付いたものです、それは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'; 
     }); 
    } 
},

注意の上。2回表示しないと、最初に表示を切り替えるときには機能しません。

出典

2011-09-22 09:31:25 frank

+0

ありがとうございました - 私たちはあなたの説明と同様のものを使っています。しかし、あなたはIEのバージョン<= 7であなたの仕事をやってみたいと思うかもしれません...例えばIE 8とIE 9は、回避策なしで大丈夫でしょう。 – codefactor

関連する問題

 関連する問題