渲染野生动物园

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

您忘了将没有前缀的border-radius添加到input.searchbox。

添加

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

给你的css，你很高兴。

您还可以尝试使用特定于浏览器的CSS。对于mozilla，它是：

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

您可以在http://browserhacks.com/

上查看完整的浏览器清单