9

エディタービューでプラ​​グインの機能を無効にするために、Facebookのコメントプラグイン上に非表示のdivを作成しようとしています。この非表示のdivは、IE8を除くすべてのブラウザーで機能します。どうすればこれを修正できますか？

HTML：

<div id="container">
   <div id="coveriframe"></div>   
    <div data-bind-component="fbml: fbml">(RENDER JS COMMENTS VIA KO)</div>
</div>

IE8で試してみてください：

http://jsfiddle.net/pkbz4/19/

  • 上記のコードは、他のすべての主要なブラウザで機能します。WTFマイクロソフト？

スタイルシート：

    #container {
        width: 100%;
        height: 100%;
        position: relative;
    }

    #navi, 
    #coveriframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #coveriframe {
        z-index: 10;
   }
4

5 に答える 5

15

私はIE8でこれを数回行いました。私にとって有効な解決策は、divに背景色を割り当ててから、不透明度を0に設定することです。IE8は、divを残りのコンテンツの上に「存在する」と認識します。また、設定を見つけるposition: absoluteと、0への4つの方向すべてが、100％の幅と高さよりも信頼性が高くなります。このような：

#coveriframe {
  position: absolute;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3007;
  background: #fff;
  filter: alpha(opacity=0);
  opacity: 0;
}

これがあなたのjsfiddleへの私のアップデートです：http：//jsfiddle.net/pkbz4/21/

于 2012-07-30T22:56:42.377 に答える
4

CSS仕様によると：

パーセンテージは、生成されたボックスを含むブロックの高さを基準にして計算されます。含まれているブロックの高さが明示的に指定されておらず（つまり、コンテンツの高さに依存している）、この要素が絶対的に配置されていない場合、値は「auto」に計算されます。

基本的に、古いバージョンのIE（IE8を含む）では、パーセンテージの高さは親要素の高さに基づいています。親要素に明示的な高さがない場合、パーセンテージは無視され、Auto（この場合は0px）に設定されます。

したがって、これを修正するには、＃coveriframeまたはその親の高さ/幅を明示的に設定する必要があります。試すことができる1つのことは、htmlとbodyの高さを100％に設定することです（これらが親要素であると想定しています）。

html, body { height:100%; }

#container {
    width: 100%;
    height: 100%;
    position: relative;
}

#navi,
#coveriframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#coveriframe {
    z-index: 10;
}
于 2012-07-16T22:21:42.763 に答える
1

問題は、ie9までのInternet Explorerが、透明な背景にカーソルを合わせたときにマウスのカーソルを認識しないことです。ザックシプリーの答えは良い解決策を提供します。

ただし、透明なdivまたはテキストに境界線または要素を追加する場合、これを行う最も簡単な方法は、背景として1pxの透明なpngを追加することです。

#coveriframe {
  position: absolute;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3007;
  background-image: url("pixel-transparent.png");
}
于 2012-08-01T09:52:22.993 に答える
1

なぜあなたはjavascriptでやりたいと思ったのですか、そしてそれはすべてのブラウザでうまく機能します、私はあなたがうまくいくことを願っている私の例をしましょう：

----------------- DIV -----------------

<div id="div1" style="display: block;"> <div class="mainbody"> <br /> </div></div>

----------------- JavaScript ----------------

    function showHideDiv(divX) {

        if (divX == "1") {
            document.getElementById("div1").style.visibility = "visible";
            document.getElementById("div2").style.visibility = "hidden";

    }

-----------------ボタンHTML----------------

<li><a href="#cuenta" onclick="showHideDiv(0)">click_Aqui</a></li>

于 2012-07-16T22:13:37.973 に答える
0

それに固定の高さと幅を設定していることを確認してくださいDIV。

上記のShaquinTrifonoffのように100%、または任意の長さで%動作しない場合がありIE8ます。%そのような状況では常に避けようとしています。

コードスニペット ：-

html,body{ //This makes your page expandable as per screen resolution 
 height:100%;
}

#your-hide-div{
  height:100px;
  width: 100px;
  display:block;
}
于 2012-07-31T12:22:48.360 に答える