html - 应用样式表后两个按钮(超链接、提交)大小不一样

Question

我有两个按钮，第一个是 <a>标记，第二个为 <input type="submit"> .
我想让两者都像一些。

以下是 firefox 上的屏幕截图

以下是 IE7 上的屏幕截图

HTML

<div id="loginForm">
    <form action="login.php" method="post">
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" /><br />
        <label for="password">Password:</label>
        <input type="password" name="password" id="password" /><br /><br />
        <input type="submit" name="sbmtLogin" value="Sign in" /> 
        <a href="register.php">Sign up</a> 
    </form>
</div>

CSS

body {
    margin:0;
    padding:0;
}
div#loginForm {
    width:270px;
    max-width:270px;
    margin:100px auto;
    padding:10px;
    text-align:center;
    background-color:#8de3fd;
}
div#loginForm input[type=text], div#loginForm input[type=password] {
    border:1px solid #9a9a9a;
    width:150px;
    margin:3px;
    padding:5px;
    color:#5b5b5b;
}
div#loginForm label {
    display:inline-block;
    width:70px;
}
div#loginForm input[type=submit] {
    border:1px solid #9a9a9a;
    width:50%;
    padding:5px;
    background-color:#f2f2f2;
    color:#5b5b5b;
    font: bold 16px arila;
}
div#loginForm a {
    border:1px solid #9a9a9a;
    background-color:#f2f2f2;
    color:#5b5b5b;
    padding:5px;
    text-decoration:none;
    font: bold 16px arila;
}

您还可以看到 JsFiddle online demo

Answer 1

尝试提供 display:inline-block给你的<a>标签。这只是一个 float 问题。您的 anchor 标记没有任何 float 。