Question

如果您将鼠标悬停在<img>上，则会显示“hiddenPanel”<div>。这在FF和其他浏览器中工作正常，但在IE中，<div>出现在“内容”<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;
    }

Answer 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>

您还可以尝试使用上面代码中的this demo按照预期在IE中运行。

Answer 2

内容div是否包含Flash文件？

如果确实如此，那么您需要检查this question，它有您的解决方案。

如果您可以发布您正在使用的jQuery代码和CSS，那将会有很大帮助。

IE中的jQuery动画分层问题

的jQuery

HTML

CSS

2 个答案: