HTML / CSS：Firefox上的表單確實與chrome上的表單有所不同

Question

我有一個簡單的表格

<div class="wrapper">
<div id="form">
    <h3>Login</h3>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
        <fieldset>
        <legend>Login</legend>

        <label for="username">username:</label><input type="text" name="username" value="">
        <br />
        <label for="password">password:</label><input type="password" name="password" value="">
        <br />
        <input type="submit" name="login" value="submit"><br />
        </fieldset> 
    </form>
</div> 

和CSS

.wrapper {
    margin-top: 180px;
}

#form {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

有了這個CSS，我想將表單居中。
但我的主要問題是，該表格在Google Chrome和Mozilla Firefox上看起來有所不同。 在Firefox上，它更大且不居中。

在Chrome上：

在Firefox上：

我正在使用Firefox 42.0，Google Chrome版本46.0.2490.86和Ubuntu 14.04.3 LTS。

非常感謝你。

Answer 1

可能是Firefox為文本框應用了一些默認寬度。 嘗試在CSS中添加以下內容，以便Firefox和chrome看起來都一樣。

 #form input:not([type=submit])
 {
   width:150px;
 }