绝对定位的 div 中的输入字段会破坏 IE7 中的布局答案

【问题标题】：Input field within absolutely-positioned div breaks layout in IE7绝对定位的 div 中的输入字段会破坏 IE7 中的布局
【发布时间】：2010-11-06 05:49:57
【问题描述】：

我在网页上使用 div 作为“对话框”。我定义如下：

#ha2game {
    position:absolute;
    top:0px;left:50%;
    width:258px; height:258px;
    margin-top:110px;
    margin-left:-155px;
    padding:21px;
    background-color:#900;
    border:1px #444 solid;
    color:#000;
    font-weight:bold;
    font-family:"Courier New", Courier, monospace;
    display:none;
    z-index:100;
}

    #gamename {
        border:1px solid #444;
        margin:15px 4% 0 4%;
        width:90%;  
        font-size:40px;
        text-align:center;
        font-family:"Courier New", Courier, monospace;
        font-weight:bold; }

当用户点击一个我连接了 jQuery show() 的按钮时，它就会出现。在 Firefox、Chrome 和 Safari 中，行为按预期工作，div 覆盖了它下面的所有 html 元素。然而，在 IE 7 中，对话框会破坏页面布局。我 99% 确定是 div 中的 <input> 标签影响了对话框 div“下方”的内容流。

如果我定义 div 样式的方式有什么特别之处，请告诉我。

这是 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>stackoverflow</title>
    <script type="text/javascript" src="../cfg/jquery-1.4.3.min.js"></script>
    <link href="css/mad4.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="stage">
    <!-- GAME SCENE -->
    <div class="stage_inner" id="scene_game"> 
        <div class="common_inner">
            <img class="homelink" src="img/mad4logo300x100.png" width="300" height="100" alt="film school" />
        </div>
        <div class="game_inner" id="filter">
            <img src="img/characterslabel.png" width="130" height="29" />
            <img class="imglink" id="showall" src="img/recycle.png" width="30" height="30"/><img class="imglink" id="charslide" src="img/downarrow.png" width="30" height="30"/>
            <br />
            <hr style="width:100%; margin-top:-10px; margin-bottom:17px; color:#EEE" />
            <br />
        </div>
        <div class="game_inner" id="ha2script"> 
            <img src="img/screenplaylabel.png" width="130" height="29" /><br /><hr style="width:100%; margin-top:-14px; margin-bottom:25px; color:#EEE;" />
        </div>
        <br/>
    </div>
</div>

<!-- GAME -->
<div id="ha2game">
  <div id="ha2game_hd">
        <span id="s1_hd"><div class="allstagewhite">Enter your name for history...</div></span>
    </div>
    <div id="ha2game_bd">
        <span id="s1_bd"><input autocomplete="none" id="gamename" type="text" size="8" maxlength="7" value=""></input></span>
    </div>
    <div id="ha2game_ft">
        <span id="s1_ft"><div class="allstagewhite">START!</div></span>
    </div>
</div>

</body>
</html>

我只是在做一个$('#ha2game').show()。

【问题讨论】：

这可能是 IE Z-index 错误，但如果没有您的所有代码，则很难判断。
还有什么模式正在呈现页面：怪癖还是标准？
@Diodeus，同意我们需要更多代码。 z-index 错误不会中断流程，它只是无法识别 z-index。
@Steve M... 能否请您发布 HTML 以及理想情况下的 Jquery。你的 CSS 看起来不错。
应该是$('#ha2game').show()。请将相关css添加到jsfiddle.net/U7YwT

标签： jquery html css internet-explorer

【解决方案1】：

尝试最初在 CSS 中设置 left:-999em，而不是 .show() 设置 .css('left', '50%')。

如果这不起作用，您可以发布相关的 html 吗？也许尝试在这个元素周围包装一个 div，基本上是在它周围创建一个包装器，但不要对包装器应用任何样式。

【讨论】：

我发布了页面的 html。问题不在于 show() 函数，而在于“对话框”div 中的输入标签。我会更新我原来的问题。感谢您的帮助。