1

Firefox バージョン 19 では、入力フィールドとボタンの間のスペースに問題があります。入力ボタンがフォームの背景の内側にあり、垂直方向に中央に配置されるようにしたいのですが、ボタンは Chrome や IE9 よりも Firefox の方が大きいため、フォームの背景の下部に接触します。これは 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 に答える