HTML/CSS：表并在Firefox看起来不同于对铬

我有一个简单的形式HTML/CSS：表并在Firefox看起来不同于对铬

<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，谷歌Chrome版本46.0.2490.86和Ubuntu 14.04.3 LTS。

非常感谢。

来源

2015-11-30 coder

这可能是正在应用的浏览器的默认样式。使用内置在浏览器中的调试工具来查找默认样式表正在设置哪些样式属性并覆盖它们。或者使用[normalize.css]（http://necolas.github.io/normalize.css/）等重置样式表覆盖所有默认样式。 – RoToRa

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

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

来源

2015-11-30 08:38:36

HTML/CSS：表并在Firefox看起来不同于对铬

回答

相关问题