2013-04-07 5 views
1

У меня есть проблема с моей кнопкой отправки. Он на один пиксель ниже входного сигнала txt, но только в Safari. Chrome и Firefox в порядке.Safari: Отправить на один пиксель ниже

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/

+0

И да, я использую normalize.css. –

+0

Я смотрю на него в сафари V5.1.5 (7534.55.3), и он отлично работает –

+0

http://cl.ly/image/3M1n270Z0L41 .. Вот что я вижу в сафари. –

ответ

0

ли эта помощь?
http://jsfiddle.net/panchroma/ERhLP/

я мог видеть вспышку на Safari, а поэтому я попытался явно устанавливая высоту поля ввода и кнопки отправки и изменять их четное число.

input#email{ 
height:48px; 
}  

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

Удачи вам!

+0

http://cl.ly/image/3h0j1n3v1w0c - теперь это похоже на Chrome и Safari. –

+0

На 100% он выглядит хорошо для меня с Safari 6.0.3 и Mac Chrome 26.0.1410.43. Как он выглядит, если вы не увеличиваете? Помните, что просмотр с частотой, отличной от 100%, иногда может вызывать выравнивание пикселем или около того. –

+0

Safari: http://cl.ly/image/0b3Y411v130D, Chrome: http://cl.ly/image/0M021q25181M - да, извините, я просто попытался указать, что проблема все еще существует. Chrome 26.0.1410.43, Safari 6.0.3 OSX 10.8.3 –

Смежные вопросы