Question

我在网页上使用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()。

Answer 1

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

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

绝对定位的div中的输入字段在IE7中打破布局

1 个答案: