CSS3按钮在web和iOS上的呈现方式不同

Question

我找到了一些用于生成我在我的网站上使用的CSS3按钮的代码.在浏览器中查看时按钮看起来很棒.但是,在我的网站的移动网络版本(使用相同的样式)上,按钮的呈现方式不同.更奇怪的是,如果我使用Safari并使用iPhone用户代理查看我的网站,按钮看起来应该是这样.但是在iOS模拟器中他们没有.有人可以帮我理解为什么吗？

这是我正在使用的代码:

.button, #button .button, li.button .button { 
  display: inline-block; 
  zoom: 1; 
  *display: inline; 
  vertical-align: baseline; 
  outline: none; 
  cursor: pointer; 
  text-align: center; 
  text-decoration: none; 
  font: 14px/100% Arial, Helvetica, sans-serif; 
  padding: .5em 1.5em .55em; 
  text-shadow: 0 1px 1px rgba(0,0,0,.3); 
  -webkit-border-radius: .5em; 
  -moz-border-radius: .5em; 
  border-radius: .5em; 
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
  box-shadow: 0 1px 2px rgba(0,0,0,.2); 
}

.orange, #button .orange { 
  color: #fef4e9; 
  border: solid 1px #da7c0c; 
  background: #f78d1d; 
  background: -webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20)); 
  background: -moz-linear-gradient(top, #faa51a, #f47a20); 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
}

以下是它在浏览器中呈现的方式:

以下是它在iPhone上呈现的方式:

Answer 1

应用"-webkit-appearance:none;" 在你的css属性上添加这行 "input [type = submit],输入[type = Reset] {-webkit-appearance:none;}".