Различный внешний вид кнопок в safari iOS

У меня есть кнопка, но в iOS Safari оказывается различным. Я попытался с этим кодом -webkit-appearance: none; и оно я не функционирует.

Это CSS кнопки (также в JSFiddle):

button {
  padding: 5px 20px;
  overflow: hidden;
  background-color: #3fc2f0;
  /*background-image: linear-gradient(#3fc2f0, #3fc2f0);*/
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -webkit-box-shadow: 0 2px 5px #19748f;
  -moz-box-shadow: 0 2px 5px #19748f;
  box-shadow: 0 2px 5px #19748f;
  font-family: Arial;
  color: #ffffff;
  font-size: 16px;
  position: relative;
}

Что это оказывается так в различных браузерах (размер равен, проблема - различный край):

Incluso con el mismo css se ven diferentes en el mismo ipad

Даже с тем же CSS они оказываются различными в том же iPad. Почему происходит это, и как я могу решать это?

0
задан 29.05.2017, 07:52
1 ответ

В тебе CSS не estГЎs определяя свойство border тогда браузер берется за то, чтобы помещать стиль краев из-за default.

Я почти уверен (благодаря тому, что я не имею safari), что, если aГ±ades border: 1px solid #CCC; в твои CSS только как доказательство, края verГЎn ты был равен.

button {
    padding: 5px 20px;
    overflow: hidden;
    background-color: #3fc2f0;
   /*background-image: linear-gradient(#3fc2f0, #3fc2f0);*/
   -webkit-border-radius: 24px;
   -moz-border-radius: 24px;
   border-radius: 24px;
   -webkit-box-shadow: 0 2px 5px #19748f;
   -moz-box-shadow: 0 2px 5px #19748f;
   box-shadow: 0 2px 5px #19748f;
   font-family: Arial;
   color: #ffffff;
   font-size: 16px;
   position: relative;

    border: 1px solid #CCC;
}
0
ответ дан 24.11.2019, 08:46