Chrome上的按鈕高度

Question

所以我有這個問題，這從來沒有發生過我。 我試圖把一個文本字段放在一個按鈕旁邊，我已經做了，它看起來很棒。

問題是，它看起來很棒的Firefox，但在鉻上唯一的問題是按鈕的高度。我不知道爲什麼它沒有采取指定的高度。在我的網站一切的偉大工程（高度方向）上的所有跨平臺

這裏所有相同的指定HIGHT是代碼：

HTML

<div> <!-- filter item start --> 
<p> 
<a href="#" id="add-friend-feed-link"> 
Add Friend 
</a> 
</p> 

<form method="post" action="" name="searchFriendForm" id="add-friend-search"> 
<input type="text"/ name="searchFriendText"> 
<input type="button" class="small green button" id="add-friend-button"/> 

</form> 

<hr> 
</div> <!-- filter item end --> 

和CSS

/* Absolutes start */ 

#add-friend-search{  
    display: block; 
    position: absolute; 
} 

#add-friend-search input[type="text"]{ 

    -moz-border-radius:4px 0px 0px 4px; 
    -moz-box-shadow:0 1px 0 #444444; 
    -webkit-border-radius:4px 0px 0px 4px; 
    -webkit-box-shadow:0 1px 0 #444444; 
    border-radius:4px 0px 0px 4px; 
    box-shadow:0 1px 0 #444444; 
    background:none repeat scroll 0 0 #D4D8DF; 
    border:1px solid black; 
    color:#444444; 
    font:13px Arial,sans-serif; 
    height:19px; 
    margin: 20px 4px 4px; 
    padding:5px 6px 4px; 
    width:250px; 
    text-align: center; 
    float: left; 
    display: inline-block; 
} 

#add-friend-search{ 

    background:url("../images/small arrow.png") no-repeat scroll 88px 2px transparent; 
    display:block; 
    position:absolute; 
    width:332px; 

} 

#add-friend-search input[type="button"]{ 

    background:url("../images/search icon.png"); 
    background-position: center; 

} 


#add-friend-button{ 

    border: 1px solid black; 
    border-radius: 0 4px 4px 0; 
    -moz-border-radius: 0 4px 4px 0; 
    -webkit-border-radius: 0 4px 4px 0; 
    display: inline-block; 
    height: 21px !important; 
    margin-right: 33px; 
    margin-top: 20px; 
    position: absolute; 
    right: 0; 
    max-height: 31px;  
} 

/*Absolutes end */ 

這就是它在Firefox中的樣子

，這就是它看起來像在Chrome

這是按鈕XCSS包含小，綠色的，但我不應該修改這個CSS AT ALL

/*-------------------------------------------------------------------------------------------- 
Button Styles Reset - Gets rid of Browser Specific Issues 
-------------------------------------------------------------------------------------------- */ 
input[type="button"], button { 
border:0 none; 
font:inherit; 
} 
*:focus{outline:0 none;} 
input[type="submit"] {border:1px solid rgba(0, 0, 0, 0.25);} 
input[type="button"], button {-moz-box-sizing: content-box;} 
input[type="button"]::-moz-focus-inner, button::-moz-focus-inner { padding:0;border:0 none; }/*fixes mozilla button padding */ 
.clearfix:after { 
clear: both; 
content: '.'; 
display: block; 
font-size: 0; 
line-height: 0; 
visibility: hidden; 
width: 0; 
height: 0; 
} 
/*-------------------------------------------------------------------------------------------- 
General Button Styles, Cascades Down To Every Button 
-------------------------------------------------------------------------------------------- */ 
.button { 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
border-radius:5px; 
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50); 
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50); 
box-shadow:0 1px 3px rgba(0, 0, 0, 0.50); 
background:#222222 url(button-images/button-overlay.png) repeat-x; 
border:1px solid rgba(0, 0, 0, 0.25); 
color:#FFFFFF !important; 
cursor:pointer; 
display:inline-block; 
font-size:13px; 
font-weight:bold; 
line-height:1; 
overflow:visible; 
padding:5px 15px 6px; 
position:relative; 
text-decoration:none; 
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); 
width:auto; 
text-align:center; 
} 
.button:hover { 
background:#111111; 
color:#FFFFFF; 
} 
.button:active { 
background:#242424; 
} 
.green.button { 
background-color:#91BD09; 
} 
.green.button:hover { 
background-color:#749A02; 
} 
.green.button:active { 
background-color:#a4d50b; 
} 
.blue.button { 
background-color:#0E59AE; 
} 
.blue.button:hover { 
background-color:#063468; 
} 
.blue.button:active { 
background-color:#1169cc; 
} 
.purple.button { 
background-color:#660099; 
} 
.purple.button:hover { 
background-color:#330066; 
} 
.purple.button:active { 
background-color:#7f02bd; 
} 
.breen.button { 
background-color:#2DAEBF; 
} 
.breen.button:hover { 
background-color:#007D9A; 
} 
.breen.button:active { 
background-color:#36cbdf; 
} 
.red.button { 
background-color:#CC0000; 
} 
.red.button:hover { 
background-color:#990000; 
} 
.red.button:active { 
background-color:#ea0202; 
} 
.magenta.button { 
background-color:#A9014B; 
} 
.magenta.button:hover { 
background-color:#630030; 
} 
.magenta.button:active { 
background-color:#ce025c; 
} 
.orange.button { 
background-color:#FF5C00; 
} 
.orange.button:hover { 
background-color:#D45500; 
} 
.orange.button:active { 
background-color:#fd762a; 
} 
.yellow.button { 
background-color:#FFE115; 
} 
.yellow.button:hover { 
background-color:#E4C913; 
} 
.yellow.button:active { 
background-color:#fee539; 
} 
.white.button { 
background-color:#FFFFFF; 
border:1px solid #CCCCCC; 
color:#666666 !important; 
font-weight:normal; 
text-shadow:0 1px 1px #FFFFFF; 
} 
.white.button:hover { 
background-color:#EEEEEE; 
} 
.white.button:active { 
background-color:#ffffff; 
} 
.gray.button { 
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50); 
background:#FFFFFF url(button-images/button-overlay-black.png) repeat-x; 
border:1px solid #BBBBBB; 
color:#555555 !important; 
text-shadow:0 1px 1px rgba(255, 255, 255, 0.5); 
} 
.gray.button:hover { 
background-color:#EEEEEE; 
border-color:#999999; 
color:#444444 !important; 
} 
.gray.button:active { 
background-color:#ffffff; 
} 
/*-------------------------------------------------------------------------------------------- 
Small Buttons 
-------------------------------------------------------------------------------------------- */ 
.small.button { 
font-size:11px; 
padding:5px 15px 6px; 
background-image:url(button-images/small-button-overlay.png); 
} 
input[type="submit"].small.button, .small.button.input { 
padding:3px 15px 4px; 
} 
input[type="button"].small.button, button.small.button { 
padding:4px 15px; 
} 
/*-------------------------------------------------------------------------------------------- 
Tall Buttons 
-------------------------------------------------------------------------------------------- */ 
.tall.button { 
font-size:14px; 
padding:8px 19px 9px; 
background-image:url(button-images/tall-button-overlay.png); 
} 
.tall.gray.button { 
background-color:#FFFFFF; 
background-image: url(button-images/tall-black.png); 
background-repeat:repeat-x; 
} 
.tall.gray.button:hover { 
background-color:#EEEEEE!important; 
border-color:#999999; 
color:#444444 !important; 
} 
.tall.gray.button:active { 
background-color:#FFFFFF!important; 
} 
.tall.button em { 
font-size:11.5px; 
font-style:normal; 
display:block; 
margin-top:5px; 
} 
/*-------------------------------------------------------------------------------------------- 
Round Buttons 
-------------------------------------------------------------------------------------------- */ 
.round.button { 
-moz-border-radius:15px; 
-webkit-border-radius:15px; 
border-radius:15px; 
background-image:url(button-images/round-button-overlay.png); 
border:1px solid rgba(0, 0, 0, 0.25); 
font-size:13px; 
padding:0; 
} 
.round.button span { 
-moz-border-radius:14px; 
-webkit-border-radius:14px; 
border-radius:14px; 
display:block; 
line-height:1; 
padding:4px 15px 6px; 
} 
.round.button.input { 
padding:3px 13px 4px; 
} 
.small.round.button { 
-moz-border-radius:12px; 
-webkit-border-radius:12px; 
border-radius:12px; 
font-size:11px; 
} 
input[type="button"].round.small.button, button.round.small.button { 
padding:0; 
} 
.small.round.button span { 
-moz-border-radius:11px; 
-webkit-border-radius:11px; 
border-radius:11px; 
padding:6px 15px 6px; 
} 
.large.round.button { 
-moz-border-radius:18px; 
-webkit-border-radius:18px; 
border-radius:18px; 
background-position:left bottom; 
} 
.large.round.button span { 
-moz-border-radius:17px; 
-webkit-border-radius:17px; 
border-radius:17px; 
font-size:14px; 
padding:7px 20px 9px; 
} 
.large.tall.round.button small { 
display:block; 
margin-top:5px; 
} 

Answer 1

Chrome和Firefox似乎與在類中顯示樣式相沖突：小型，綠色和輸入結合應用於id添加朋友按鈕的樣式。

對該按鈕應用了很多樣式。我建議你嘗試重建該表單，每次添加一個類並檢查每個瀏覽器，直到遇到差異。

編輯 提交按鈕的呈現之間的差異是由於

-moz-box-sizing: content-box; 

位於你的CSS類

input[type="button"], button { 
    -moz-box-sizing: content-box; 
} 

請關閉電源在Firefox中的Firebug，你會看到該按鈕的尺寸與在Chrome中的尺寸相同。

Answer 2

There's a good article on this在quirksmode.org，你可以找到documentation on box-sizing on MDN。解決方案與尼古拉斯所說的相同。

input[type=submit], input[type=button], button { 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -ms-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
} 

像與border-radius，我更喜歡使用SASS mixin來處理瀏覽器的前綴。