渲染野生动物园

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 {border-radius：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/上查看浏览器的完整列表