1

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);
}
4

3 回答 3

2

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

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

以上对我来说看起来不错。适应你的口味。

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

于 2013-02-27T07:44:50.630 回答
0

尝试：

@-moz-document url-prefix() {
    form {
    padding: 0px 0px 3px;
   }
}
于 2013-02-27T07:37:46.660 回答
0

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

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

于 2013-02-27T07:43:00.250 回答