button - 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

在您的 css 属性上应用 "-webkit-appearance:none;" 并添加这一行 “输入[type=submit], input[type=Reset]{ -webkit-appearance:none; }”。