<input type = "submit"> error de relleno en Safari mobile?

Question

(Esto es similar a la) pregunta #3430506 (también sin respuesta, sino que se aplica a las etiquetas de entrada en lugar de elementos HTML5.)

En < input type = "submit" > botones, el navegador del iPhone/Safari móvil añade relleno a la izquierda y a la derecha. Esto no ocurre en la versión de escritorio, ni en ningún otro navegador de Webkit móvil/de escritorio que haya probado. Parece agregar el tamaño de fuente en px a cada lado (es decir, la fuente de 14 píxeles significa que el ancho total es de 14 píxeles y el ancho del texto + 14 píxeles).

Actualmente estoy tratando de la siguiente para eliminarlo:

/* webkit user-agent stylesheet uses input[type="submit"] */ 

form input[type="submit"] { /* more specific to override webkit */ 
    -webkit-appearance:none; 
    -webkit-border-radius:0px; 
    margin:0; 
    padding:0; 
    border:0; 
    display:block; 
} 

que he visto un montón de respuestas sobre el uso de webkit-apariencia: ninguno ... esto no hace ninguna diferencia. Tampoco eliminar las esquinas redondeadas. Hice una página para mostrar cómo la versión de escritorio presenta varios objetos -webkit-apariencia; todos tienen -webkit-border-radius: 0 y se aplica el código anterior.

Trate de ver éstos en el escritorio de Safari continuación iPhone:
http://deleri.com/test.html

(pantalla Safari móvil para aquellos que no tienen un iPhone :)
deleri.com/safari.png

Aunque me encantaría Sé por qué ocurre este error, ahora estoy más preocupado por solucionarlo. He intentado todo tipo de visualización/desbordamiento/tamaño de caja/-webkit-cualquier-/ancho: opción auto/texto-sangría imaginable, y no puedo arreglarlo al configurar manualmente el ancho (el ancho final debe ser porcentual- basado, y el extraño relleno todavía se aplica). Estoy comenzando a preguntarme si se trata de una propiedad oscura o si la hoja de estilo del agente de usuario no se sobrescribe. ¿Alguna idea?

Answer 1

Si intenta configurar el relleno en un valor enorme, digamos 100px, notará que el relleno superior e inferior crecen, mientras que el izquierdo y el derecho se mantienen en el valor predeterminado, en Safari móvil. Así que supongo que es seguro asumir que esto es bastante simple y que se considera un error en las rutinas del juego web de iOS, y no existe una solución directa a menos que Apple solucione el problema.

Una solución sería crear un DIV que se parece a lo que desee y agregar un controlador onclick que envíe su formulario. No es necesario usar un botón de envío real.

Answer 2

Esto podría ser una sugerencia tonta, pero si el problema es con

<input type="submit" /> 

podría intentar cambiarla para

<button type="submit" /> 

que hace lo mismo, pero podría no tener el fallo?

Answer 3

¿Tiene control sobre el formulario? alias: ¿ingresaste manualmente el formulario?

Si lo que añadir ya sea una etiqueta de identificación o clase a la que

<input type="submit" id="submit" value="submit"> 

luego ajustar el CSS a

form input #submit { /* more specific to override webkit */ 
    -webkit-appearance:none; 
    -webkit-border-radius:0px; 
    margin:0; 
    padding:0; 
    border:0; 
    display:block; 
} 

Answer 4

me encontré con este error hoy, cuando mi madre me dijo que una página que tenía hecho faltaba texto en su viejo iPhone 3G.Efectivamente, encendí el antiguo 3G de mi esposa y lo tenemos en un cajón en algún lugar, y el texto de uno de mis botones está siendo desplazado hacia un lado porque Safari está insertando un espaciado gigante.

La buena noticia es que en la última actualización (no sé exactamente qué, pero tengo un iPhone 4 actualizado), este error se ha solucionado.

La mala noticia es que si los usuarios no actualizan sus navegadores, no puedo encontrar ninguna forma de evitarlo sin simplemente no usar la etiqueta.

Mi consejo para ahora es comprobar la versión de Mobile Safari. Si están ejecutando la última versión (o la versión que solucionó este error o más), obtienen la página con el botón. De lo contrario, se les puede enviar una página con etiquetas alternativas utilizadas para crear los botones. En mi página, esto no se ve tan bien, y es un poco incómodo, pero ya estoy revisando los navegadores basados ​​en versiones móviles o de escritorio del sitio, así que esto no es mucho más que eso.

Espero que esto ayude.

Answer 5

Tuve un problema similar y noté que mi problema se resolvió cuando configuré el fondo en un degradado en lugar de simplemente color de fondo.

Esto de alguna manera simplemente ignora los valores de relleno

#submit{ 
    background:#a0b9dc; 
    padding:9px 35px; 
} 

El código siguiente resuelve el problema de relleno para mí en los botones de envío.

#submit{ 
    background:#a0b9dc; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A0B9DC)); 
    background: -o-linear-gradient(bottom, #A0B9DC 0%); 
    background: -moz-linear-gradient(bottom, #A0B9DC 0%); 
    background: -webkit-linear-gradient(bottom, #A0B9DC 0%); 
    background: -ms-linear-gradient(bottom, #A0B9DC 0%); 
    background: linear-gradient(to bottom, #A0B9DC 0%); 
    padding:9px 35px; 
}