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]，输入[type = Reset] {-webkit-appearance：none;}”。

Answer 2

正如Shakti所说，你应该为按钮添加以下css。

-webkit-appearance: none;

在这个问题中进一步解释了这一点：

＆＃39; CSS submit button weird rendering on iPad/iPhone＆＃39;

似乎在iOS上按钮具有默认的iOS圆形外观，如果您只提供简单的背景颜色：

background: orange

但是如果你提供了一个渐变，那么这实际上会覆盖appearance css属性以使用自定义样式。

但是因为你的语法错误所以它给你带来iOS外观。

Answer 3

我抓住了我的错误。我的-webkit-gradient语法错误了。而不是：

-webkit-gradient(linear, left, top, left bottom, from(#faa51a), to(#f47a20));

这是...

-webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));

我在左侧和顶部之间有一个逗号，它不应该是。

Answer 4

您是否尝试过使用SVG作为背景图像（可以找到生成器here）？使用这个工作在iPhone 3G上，我躺在那里（jsFiddle链接here）：

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZBQTUxQSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0Y0N0EyMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkwNCkiIC8+Cjwvc3ZnPg==);

这与IE9，Chrome，Safari和Opera兼容。这不适用于IE7 / 8。我建议使用IE特定样式表或添加.orange类指令将样式应用于IE7或IE8及以下版本。关于here的更多信息。