Question

我的提交按钮有问题。它比txt输入低一个像素，但仅限于Safari。 Chrome和Firefox都很好。

input[type=text] {
height: 45px;
width: 238px;
padding: 0;
background-color: #ebebeb;
border: 1px solid #cecece;
border-radius: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow:    0px 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow:         0px 1px 3px rgba(0, 0, 0, 0.2) inset;
color: #999999;
font-size: 16px;
font-family: 'Noticia Text', serif;
padding-left: 20px;
}

input[type=text]:focus {
    outline: 0;
}

#subscribe {
padding: 0;
margin: 0;
background: #3eb0ef;
background: -moz-linear-gradient(top,  #3eb0ef 0%, #1b8dd4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3eb0ef), color-stop(100%,#1b8dd4));
background: -webkit-linear-gradient(top,  #3eb0ef 0%,#1b8dd4 100%);
background: -o-linear-gradient(top,  #3eb0ef 0%,#1b8dd4 100%);
background: -ms-linear-gradient(top,  #3eb0ef 0%,#1b8dd4 100%);
background: linear-gradient(to bottom,  #3eb0ef 0%,#1b8dd4 100%);
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow:    0px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow:         0px 1px 1px rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3eb0ef', endColorstr='#1b8dd4',GradientType=0 );
border-radius: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #1082c8;
height: 47px;
width: 107px;
font-family: 'Noticia Text', serif;
font-size: 16px;
color: white;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}

和HTML：

<form name="subscription" method="post">
  <input name="email" id="email" type="text" placeholder="Enter your email address"><input name="subscribe" id="subscribe" value="Notify me" type="submit">
</form>

http://jsfiddle.net/SV3VS/

Answer 1

这有帮助吗？
http://jsfiddle.net/panchroma/ERhLP/

我也可以看到Safari上的blip，所以我尝试明确设置输入框的高度和提交按钮，并将它们更改为偶数。

input#email{
height:48px;
}    

#subscribe {
....
height: 48px;
....
}

祝你好运！

Safari：提交低一个像素

1 个答案: