Question

该页面包含一个由div“login”持有的loginform。在IE9中，div显示两次。

我在几个浏览器中学习了CSS和HTML以及源代码。我找不到任何理由让IE显示div两次。

该网站可在此处找到：http://atbfacturen.wietze.uwvakman.nl:81/

我不清楚为什么IE会这样做。

HTML：

<body>
    <div id="header">
        <a href="/users/home"><img src="/img/atblogo_black.png" alt="Logo ATB Facturen" /></a>            

        <div id="headerOptions">
            Tuesday 06 September 2011&nbsp;|&nbsp;<a href="/pages/help">Hulp</a>            
        </div>
    </div>


    <form action="/" id="UserLoginForm" method="post" accept-charset="utf-8">
        <div style="display:none;">
            <input type="hidden" name="_method" value="POST" />
        </div>
    <div id="login">
    <table>
        <tr>
            <td><strong>Gebruikersnaam</strong></td>

            <td><input name="data[User][username]" type="text" style="width:150px" maxlength="50" id="UserUsername" /></td>
        </tr>
        <tr>
            <td><strong>Wachtwoord</strong></td>
            <td><input type="password" name="data[User][password]" style="width:150px" id="UserPassword" /></td>
        </tr>
        <tr>
            <td> </td>

            <td><input type="submit" value="Aanmelden" /></td>
        </tr>
    </table>
    </form>
    </div>
</body>

CSS：

#login {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    padding: 25px;
    background-color: #efefef;
    border: 1px solid #cccccc;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

Answer 1

当<tr>元素在<div>之外作为一个整体打开时，您正在关闭<table>元素的div inscie。

由于IE认为非法嵌套标记，IE可能会尝试为您清理一下您的标记

Answer 2

如果你需要花时间并正确缩进你的HTML，你会立即看到你的错位标签。此外，通过HTML validator运行您的网站往往有助于这些情况。

事实上，我建议始终通过验证器运行您的网页。我可以伤害你的感情，但往往它会告诉你许多你错过的小事。你没有必要修复它们（有时候它们有很好的理由可以解决它们的问题），但是尽可能多地修复它们永远不会伤害。

<body>
    <div id="header">
        <a href="/users/home"><img src="/img/atblogo_black.png" alt="Logo ATB Facturen" /></a>
        <div id="headerOptions">
            Tuesday 06 September 2011&nbsp;|&nbsp;<a href="/pages/help">Hulp</a>
        </div>
    </div>
    <form action="/" id="UserLoginForm" method="post" accept-charset="utf-8">
        <div style="display:none;">
            <input type="hidden" name="_method" value="POST" />
        </div>
        <div id="login">
            <table>
                <tr>
                    <td><strong>Gebruikersnaam</strong></td>
                    <td><input name="data[User][username]" type="text" style="width:150px" maxlength="50" id="UserUsername" /></td>
                </tr>
                <tr>
                    <td><strong>Wachtwoord</strong></td>
                    <td><input type="password" name="data[User][password]" style="width:150px" id="UserPassword" /></td>
                </tr>
                <tr>
                    <td> </td>
                    <td>
                        <div class="submit">
                            <input type="submit" value="Aanmelden" />
                        </div>
    </form>
</td>
</tr>
</table>

Div在I.E.出现两次没有任何理由。在其他浏览器中它工作正常

2 个答案: