Chrome上的按钮高度

Question

所以我遇到了这个问题，这在我之前从未发生过。 我试图将一个文本字段放在一个按钮旁边，我已经这样做了，看起来很棒。

问题是它在firefox上看起来很棒，但在chrome上唯一的问题是按钮的高度。我不知道为什么它不采取指定的高度。我网站上的其他所有内容都非常有效（高度明智），它在所有跨平台上都具有相同的指定高度

以下是代码：

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全部

/*--------------------------------------------------------------------------------------------
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 add-friend-button的样式相结合。

对该按钮应用了很多样式。我建议您尝试重建该表单，一次添加一个类并检查每个浏览器，直到遇到差异。

修改 呈现提交按钮的区别在于

-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来处理浏览器前缀。