Оказание сафари

Question

У меня возникла проблема с рендерингом в сафари.

На firefox, chrome и IE. как вы можете видеть из изображений ниже:

input.searchbox{-webkit-border-radius:10px;-moz-border-radius:10px;background-color:#af5354;border:1px solid #af5354;background-color:#AF5354;border:1px solid #AF5354;border-radius:5px;color:#FFF;float:left;height:19px;margin-left:0.5em;margin-top:1.3em;outline:0px none;padding-left:0.5em;padding-top:0.4em;text-align:left;width:170px;} 
 
input.searchbox:focus{background:#e87476;background:-moz-linear-gradient(top, #e87476 0%, #e87476 20%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #e87476), color-stop(20%, #e87476));outline:0;color:#FFF;} 
 
*::-webkit-input-placeholder{color:#FFF;} 
 
*:-moz-placeholder{color:#FFF;} 
 
*::-moz-placeholder{color:#FFF;} 
 
*:-ms-input-placeholder{color:#FFF;} 
 
input.button{background:url("../../assets/images/sprite.png") -142px -7px;border:none;float:left;height:28px;margin:16px 0px 0px -28px;overflow:hidden;padding:0;width:38px;} 
 
input.button:hover{background:url("../../assets/images/sprite.png") -142px -47px;border:none;float:left;height:28px;margin:16px 0px 0px -28px;overflow:hidden;padding:0;width:38px;} 
 
input[type=search]{-webkit-appearance:none;}

<form id=header-search> 
 
<input class=searchbox placeholder="Search Spout TV"> 
 
<input type=submit class=button value=""/> 
 
</form>

любой способ, как это исправить, так что делает точный во всех браузерах?

Answer 1

Добавить этот: input.searchbox {границы радиуса: 10px;}

Answer 2

Вы забыли добавить границы радиуса без префикса к вашему input.searchbox.

Просто добавьте

input.searchbox {border-radius: 10px;} 

К вашему CSS, и вы хорошо идти.

Вы также можете попробовать использовать CSS-браузер. Для Mozilla, это:

@-moz-document url-prefix() { 
.container { 
    top: 00px; 
    } 
} 

Вы можете увидеть полный список browserhacks на http://browserhacks.com/