[英]HTML / CSS: Form does look different on firefox than on chrome
我有一个简单的表格
<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上,它更大且不居中。
我正在使用Firefox 42.0,Google Chrome版本46.0.2490.86和Ubuntu 14.04.3 LTS。
非常感谢你。
可能是Firefox为文本框应用了一些默认宽度。 尝试在CSS中添加以下内容,以便Firefox和chrome看起来都一样。
#form input:not([type=submit])
{
width:150px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.