Кнопка CSS3 отображается по-разному в Интернете и iOS

Question

Я нашел код для генерации кнопок CSS3, который я использую на своем сайте.Кнопки выглядят великолепно при просмотре в браузере.Однако в мобильной версии моего сайта (которая использует те же стили) кнопки отображаются по-разному.Даже страннее, если я использую Safari и просматриваю свой сайт с помощью User Agent на iPhone, кнопки выглядят так, как должны.Однако в iOS Simulator это не так.Может кто-нибудь помочь мне понять почему?

Вот код, который я использую:

.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

Apply "- webkit-вести: нет;" в ваших свойствах CSS и добавьте эту строку "input [type = submit], input [type = Reset] {-webkit-Appearance: none;}" .

Answer 2

Как говорит Шакти, вы должны просто поставить следующую кнопку css для кнопки:

-webkit-appearance: none;

Это объясняется далее в этом вопросе:

' Странный рендеринг кнопки отправки CSS наiPad / iPhone '

Похоже, что на 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 в качестве фонового изображения (генератор можно найти здесь )?Использование этого работало на iPhone 3G, который у меня был (ссылка jsFiddle здесь ):

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

Это совместимо с IE9, Chrome, Safari и Opera.Это не будет работать с IE7 / 8.Я предлагаю использовать таблицу стилей, специфичную для IE, или добавить в инструкции класса .orange, чтобы применить стиль к IE7 или IE8 и ниже.Подробнее об этом здесь .