HTML / CSS：表单在 Firefox 上看起来确实与在 chrome 上不同答案

【问题标题】：HTML / CSS: Form does look different on firefox than on chromeHTML / CSS：表单在 Firefox 上看起来确实与在 chrome 上不同
【发布时间】：2016-03-03 20:05:42
【问题描述】：

我有一个简单的表格

<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。

非常感谢。

【问题讨论】：

这可能是正在应用的浏览器的默认样式。使用浏览器内置的调试工具来查找默认样式表设置的样式属性并覆盖它们。或者使用normalize.css 等重置样式表覆盖所有默认样式。

标签： html css forms google-chrome firefox

【解决方案1】：

可能是 Firefox 为文本框应用了一些默认宽度。尝试在您的 CSS 中添加以下内容，以便 firefox 和 chrome 看起来相同。

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

【讨论】：