(Ceci est similaire à la question (aussi sans réponse) # 3430506 , mais s'applique aux étiquettes d'entrée au lieu de HTML5 ELEMENTS.) EM> On J'essaie actuellement de l'essai suivant: P> /* 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;
}
5 Réponses :
Ceci pourrait être une suggestion de Dafts, mais si le problème est avec pourriez-vous essayer de le modifier pour qui fait la même chose mais pourrait ne pas avoir le bogue?
Merci pour la suggestion, mais malheureusement, c'est le même bug; Voir la question n ° 3430506 liée ci-dessus.
Si vous essayez de définir le rembourrage vers une valeur énorme, disons 100px, vous remarquerez que le rembourrage supérieur et inférieur augmente, à nouveau à gauche et à droite reste à la valeur par défaut, dans Mobile Safari. Je suppose donc qu'il est prudent de supposer que ce problème assez simple en tant que bogue dans les routines WebKit de iOS, et il n'y a pas de solution directe à moins que Apple ne corrige le problème.
Une solution de contournement serait de créer un DIV qui ressemble à ce que vous voulez, et ajoutez un gestionnaire ONCLICK qui soumet votre formulaire. Pas besoin d'utiliser un vrai bouton d'envoi.
Avez-vous un contrôle sur la forme? AKA: Avez-vous entré manuellement le formulaire?
Si oui, ajoutez une étiquette d'identifiant ou de classe à celle-ci p> puis ajustez votre CSS sur P> form input #submit { /* more specific to override webkit */
-webkit-appearance:none;
-webkit-border-radius:0px;
margin:0;
padding:0;
border:0;
display:block;
}
J'ai un contrôle sur la forme et j'ai essayé un mélange d'identifiants et de classes lors de la coiffage; Ni ont travaillé. (Rendu aussi spécifique que possible sans chance.)
Le texte à l'intérieur de l'attribut Valeur du bouton était éteint, donc je viens d'ajouter -webkit-apparence: aucune et elle est centrée maintenant mais -webkit-frontière-rayon ne fonctionne plus et j'avais un bouton arrondi. Quoi qu'il en soit, j'ai voté cette cause un bouton carré est meilleur que le bouton arrondi avec une seule moitié du texte. Merci!
@Andrei Change -WebKit-Border-RADIUS: 0PX TO -WEBKIT-BORTER-RADIUS: 5PX et vous devez vous retrouver avec un bouton avec un angle arrondi 5px.
J'ai couru dans ce bug aujourd'hui lorsque ma mère m'a dit qu'une page que j'avais faite était manquante du texte sur son ancien iPhone 3G. Bien sûr, j'ai tiré la vieille 3g de ma femme, nous avons couché dans un tiroir quelque part et le texte sur l'un de mes boutons est enfoncé sur le côté car Safari insère un peu d'espacement géant.
La bonne nouvelle est que dans la dernière mise à jour (je ne sais pas exactement quoi, mais j'ai un iPhone 4 mis à jour), ce bogue a été corrigé.
Bad News est que si les utilisateurs ne mettent pas à jour leurs navigateurs, je ne trouve aucun moyen de le trouver en dehors de ne pas utiliser la balise.
Mon conseil pour le moment est de vérifier la version de Mobile Safari. S'ils exécutent la dernière version (ou quelle que soit la version précédente, ce bogue ou supérieur), ils obtiennent la page avec le bouton. Sinon, ils peuvent être servis une page avec des balises alternatives utilisées pour faire les boutons. Sur ma page, cela ne ressemble pas aussi bien, et c'est un peu maladroit, mais je vérifie déjà les navigateurs basés sur des versions mobiles ou de bureau du site, ce n'est donc pas trop au-dessus de cela.
J'espère que cela aide.
J'ai eu un problème similaire et j'ai remarqué que mon problème a été résolu lorsque je fixais l'arrière-plan sur un gradient au lieu d'une couleur de fond simple.
Cela vient d'ignorer les valeurs de rembourrage p> Le code ci-dessous résolu le problème de remplissage pour moi sur des boutons Soumettre. P> #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;
}
Oui cela fonctionne, mais le rayon frontalier n'est plus appliqué, toujours une solution décente cependant