Question

Firefox 19版让我对输入字段和按钮之间的间距产生了问题。我希望输入按钮看起来在表单背景内，并且垂直居中，但Firefox中的按钮比Chrome或IE9中的按钮大，所以它触及表单背景的底部。我在1600x900显示器上看到了这个。它在Chrome和IE9上看起来很不错。这是jsfiddle http://jsfiddle.net/gyFS4/1/

HTML

<div id="signUp">
    <form action="" method="post" id="signup">
        <input type="text" class="left" id="email" name="email" placeholder="Enter your email address" value="">
        <input type="submit" id="notify-me" class="button" value="Sign me up!">    
    </form>
</div>

CSS

form {
    width: 406px;
    margin: 0px auto;
    margin-top: 32px;
    background: #ffffff;
    height: 46px;
    border-radius: 22px;
    -moz-box-shadow:    0px 0px 0px 6px rgba(255, 255, 255, 0.4);
    -webkit-box-shadow: 0px 0px 0px 6px rgba(255, 255, 255, 0.4);
    box-shadow:         0px 0px 0px 6px rgba(255, 255, 255, 0.4);
}

#email {
    margin-left: 16px;
    margin-right: 16px;
    height: 36px;
    width: 240px;
    font-size: 1em;
    color: #202020;
    background: transparent;
    border: none;
}

#email:focus {
    outline: none;
}

.button {
    margin-top: 3px;
    background-color: #c3d753;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c3d753), color-stop(100%, #a7ba3f));
    background-image: -webkit-linear-gradient(top, #c3d753, #a7ba3f);
    background-image: -moz-linear-gradient(top, #c3d753, #a7ba3f);
    background-image: -ms-linear-gradient(top, #c3d753, #a7ba3f);
    background-image: -o-linear-gradient(top, #c3d753, #a7ba3f);
    background-image: linear-gradient(top, #c3d753, #a7ba3f);
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    border:1px solid #82922d;
    display:inline-block;
    color:#ffffff;
    font-family: Open Sans, sans-serif; 
    font-size:1em;
    font-weight: 400;
    padding:8px 16px;
    text-decoration:none;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.button:hover {
    background-color: #daf159;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #daf159), color-stop(100%, #a7ba3f));
    background-image: -webkit-linear-gradient(top, #daf159, #a7ba3f);
    background-image: -moz-linear-gradient(top, #daf159, #a7ba3f);
    background-image: -ms-linear-gradient(top, #daf159, #a7ba3f);
    background-image: -o-linear-gradient(top, #daf159, #a7ba3f);
    background-image: linear-gradient(top, #daf159, #a7ba3f);
}
.button:active {
    background-color: #c3d753;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a7ba3f), color-stop(100%, #c3d753));
    background-image: -webkit-linear-gradient(top, #a7ba3f, #c3d753);
    background-image: -moz-linear-gradient(top, #a7ba3f, #c3d753);
    background-image: -ms-linear-gradient(top, #a7ba3f, #c3d753);
    background-image: -o-linear-gradient(top, #a7ba3f, #c3d753);
    background-image: linear-gradient(top, #a7ba3f, #c3d753);
    -moz-box-shadow:inset       0px 1px 3px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow:inset    0px 1px 3px rgba(0, 0, 0, 0.7);
    box-shadow:inset            0px 1px 3px rgba(0, 0, 0, 0.7);
}

Answer 1

您需要在.button类上指定高度和宽度。

.button {
    ...
    width:125px;
    height:40px;
}

以上看起来对我很好。根据自己的喜好调整。

http://jsfiddle.net/gyFS4/10/

Answer 2

尝试：

@-moz-document url-prefix() {
    form {
    padding: 0px 0px 3px;
   }
}

Answer 3

我只是在Firefox 19中查看了您的网站，看起来很不错。但这可能是因为我的浏览器选择了一种字体，因为我的计算机上没有“Open sans”字体。

通常，您所描述的问题是由父元素宽度太小引起的。确保添加每个子元素宽度以及所有边距，边框和填充的两侧。并且当按钮根据字体自动调整大小时，您可能需要使用firebug的“布局”选项卡来查看按钮的实际大小。另外，要避免字体问题，请使用所有计算机上的字体，或使用“@ font-face”为访问者计算机提供需要使用的字体（只要字体不受版权保护）。

Firefox 19中的CSS按钮大小不同（适用于chrome和IE9）

3 个答案: