渲染safari

Question

我在safari中渲染时遇到了问题。

在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;
    }
}

您可以在http://browserhacks.com/上查看浏览器黑客的完整列表