0

「hiddenPanel」にカーソルを合わせると<img>、「hiddenPanel」<div>が表示されます。これは FF やその他のブラウザでは問題なく動作しますが、IE では<div>'content' の後ろに表示され<div>ます。私は無駄にz-indexingを試みました。他にこの問題を抱えている人はいますか？

<div>(また、レイアウト上の理由から、「コンテンツ」の後にコードを移動しません)

編集:より多くのコード; jQuery / HTML / CSS ...

jQuery

    /* Column Left #1 */      
    $('.columnLeft_spec1_panel').hide().css('opacity','0.0');
    $('.columnLeft_spec1').mouseover( function() { $('.columnLeft_spec1_panel').animate({ width: '337px', height: '234px', opacity: 1.0 }, 1250 ); });
    $('.columnLeft_spec1_panel').mouseout( function() { $('.columnLeft_spec1_panel').animate({ width: '1px', height: '1px', opacity: 0.0 }, 1250 ); });

HTML

<div class="columnLeft">
  <img runat="server" src="~/images/pc_blocks_columnLeft_spec1.gif" class="columnLeft_spec1" alt="" />
  <a runat="server" href="~/" class="columnLeft_spec1_panel">&nbsp;</a>
  <img runat="server" src="~/images/pc_blocks_columnLeft_spec2.gif" class="columnLeft_spec2" alt="" />
  <a runat="server" href="~/" class="columnLeft_spec2_panel">&nbsp;</a>
</div>

<div class="columnRight">
  <img runat="server" src="~/images/pc_blocks_columnRight_spec1.gif" class="columnRight_spec1" alt="" />
  <a runat="server" href="~/" class="columnRight_spec1_panel">&nbsp;</a>
</div>

<asp:ContentPlaceHolder ID="main" runat="server"></asp:ContentPlaceHolder>

<div class="subnav">
  <asp:ContentPlaceHolder ID="subnav" runat="server"></asp:ContentPlaceHolder>
</div>

<div class="content">
  <div class="leftPanel">
    <asp:ContentPlaceHolder ID="leftPanel" runat="server"></asp:ContentPlaceHolder>
  </div>
  <div class="midPanel">
     <asp:ContentPlaceHolder ID="midPanel" runat="server"></asp:ContentPlaceHolder>
  </div>
  <div class="rightPanel">
    <asp:ContentPlaceHolder ID="rightPanel" runat="server"></asp:ContentPlaceHolder>
  </div>
</div>

CSS

    /* CONTENT
    ======================================================================*/
    .content {
      position:relative;
      height:auto; width:800px; _width:795px;
      margin:5px 5px 0px 90px; padding:20px 10px;
      min-height:250px; z-index:0;
      background:#FFF;
    }
    .leftPanel, .midPanel { float:left; }
    .rightPanel { float:left; }

    .content .leftPanel {
      height:auto; width:150px;
    }
    .content .midPanel {
      height:auto; width:375px;
      border-right:solid 1px #78A22F;
      padding:0px 30px 30px 30px;
    }
    .content .rightPanel {
      height:auto; width:180px;
      padding:0px 0px 0px 20px;
    }

    /* COLUMNS
    ======================================================================*/
    .columnLeft, .columnRight {
      height:245px; width:85px;
      background:#EEEEEE;
      margin-top:5px; position:relative;
    }
    .columnLeft {
      float:left; background:url(../images/pc_blocks_columnLeft.gif) no-repeat;
    }
    .columnLeft .columnLeft_spec1 {
      position:absolute;
      top:0px; right:0px;
    }
    .columnLeft .columnLeft_spec1_panel {
      display:none; background:url(../images/pc_columnLeft_spec1.jpg) no-repeat;
      position:absolute; z-index:5;
      left:0px;
    }
4

2 に答える 2

1

提案: CSS を確認してください。いくつかのことは FF でうまく機能しますが、IE ではほとんどのことをやり直さなければなりません。なぜなら、IE が W3C 標準に従うという点で大きな問題であることは誰もが知っているからです。

これが私が作ったデモです：

$(document).ready(function () 
    {
        $(".hoverMe").mouseover(function ()
        {
            $(".hiddenPanel").fadeIn('slow');
        }).mouseout(function ()
        {
            $(".hiddenPanel").fadeOut('slow');
        });
    });

そして、これはhtmlです：

<img class="hoverMe" alt="HOVER ME" /> <div class="hiddenPanel" style="display: none; color: blue; font-size: 20px; font-weight: bold;">This is the hidden panel</div> 
    <div class="content" style="color: red;">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

また、IE で意図したとおりに動作する上記のコードのデモを試すこともできます。

于 2009-03-30T16:03:52.357 に答える
0

コンテンツdivにFlashファイルが含まれていますか？

もしそうなら、あなたはこの質問をチェックする必要があります、それはあなたの解決策を持っています。

jQueryコードと使用しているCSSを投稿できれば、それは大いに役立ちます。

于 2009-03-30T15:53:14.333 に答える