Firefox 19中的CSS按鈕大小不同（適用於Chrome和IE9）

Firefox版本19給我提供輸入欄和按鈕之間間距的問題。我希望輸入按鈕出現在表單背景中，並且垂直居中，但Firefox中的按鈕比Chrome或IE9中的大，因此它與表單背景的底部接觸。我在1600x900顯示器上看到了這一點。在Chrome和IE9上看起來很好。這裏是的jsfiddle http://jsfiddle.net/gyFS4/1/Firefox 19中的CSS按鈕大小不同（適用於Chrome和IE9）

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

來源

2013-02-27 dannyp32

的jsfiddle PLZ .... – bobthyasian 2013-02-27 07:13:14

我加了活鏈接，但我會添加的jsfiddle了。 – dannyp32 2013-02-27 07:15:30

我替換了jsfiddle的實時鏈接。這裏是鏈接http://jsfiddle.net/gyFS4/1/ – dannyp32 2013-02-27 07:29:36

您需要指定.button類的高度和寬度。

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

上面看起來不錯。根據你的口味調整。

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

來源

2013-02-27 07:44:50 fredsbend

如果不指定寬度和高度，則取決於瀏覽器使用「最佳猜測」來繪製對象，並且每個瀏覽器都不相同。當你告訴瀏覽器確切的寬度和高度時，毫無疑問。每個標準投訴瀏覽器每次都會繪製相同的對象。對於完全相同的位置，請始終記住您所做的邊距和填充。 – fredsbend 2013-02-27 07:50:35

啊啊，謝謝愚蠢的錯誤。文字看起來好像是關閉的（firefox中的垂直方向比Chrome中的垂直方向低1個像素），但它看起來不錯，謝謝。 – dannyp32 2013-02-27 07:53:58

文本問題可能是一個字體的東西。不要忘記選擇和upvote。 – fredsbend 2013-02-27 07:54:44

嘗試：

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

來源

2013-02-27 07:37:46 bobthyasian

我只是看着您的網站在Firefox 19和它看起來很好。但那也許是因爲我的瀏覽器選擇了一種字體，因爲我的電腦上沒有「Open sans」字體。

通常您所描述的問題是由父元素寬度太小造成的。確保要添加每個子元素寬度以及所有邊距，邊框和填充的兩側。並且，由於該按鈕是基於字體自動調整大小的，因此您可能需要使用螢火蟲的「佈局」選項卡查看按鈕的實際大小。此外，爲了避免字體問題，請使用所有計算機上的字體，或使用「@ font-face」爲訪問者計算機提供它需要使用的字體（只要字體沒有版權）。

來源

2013-02-27 07:43:00 Krik

Firefox 19中的CSS按鈕大小不同（適用於Chrome和IE9）

回答

相關問題