Styling HTML Submit Button (CSS, différents navigateurs)

Question

Je veux styler un bouton de soumission qui semble être rendu abit différemment dans différents navigateurs.

<p id="lineInput"> 
    <label for="task">Add a Task</label> 
    <input type="text" name="task" id="task" /> 
    <input type="submit" id="btnSubmit" value="Add" /> 
</p> 

#lineInput { 
    ... 

position: relative; marge: 0px; }

#btnSubmit { 
    ... 
    padding: 6px 8px; 
    margin: 0; 
    font: 1em/1em Hetilica; 
    position: absolute; 
    right: 2px; 
    top: 3px; 
} 

avis sur le bouton Ajouter est trop faible sur le chrome quand #btnSubmit a bottom: 3px. la question se fixe en chrome avec bottom: 5px mais dans Firefox sera trop élevé

Answer 1

Essayez Addin ce en haut de votre fichier css:

*{ 
margin:0; 
padding:0; 
} 

De cette façon, vous pouvez vérifier s'il y a certains types de remplissage par défaut du navigateur/marge problème sans utiliser une grande thingy reset css ...

ce que je peux vous dire est que je pense que le problème est que vous envelopper que <p></p> qui ont par défaut bas 10px et haut rembourrage donc peut-être essayer reseting que à 0 dans votre css.

#lineInput{ 
padding:0; 
} 

Ou simplement changer ce paragraphe en div.

Peut-être est la solution, mais peut-être aint, parce que vous utilisez le positionnement absolut ...

J'ai compté les années px et des lettres dans les deux partie de l'image sont 15px. Dans firefox ci-dessous les lettres à la fin de la partie orange est 11px et en chrom il y a 8px. Dans Firefox de haut des lettres au début de la partie orange il y a 12px et en chrom il y a 10px. Donc c'est 5px de différence.

Essayez ceci:

#btnSubmit{ 
height:38px; 
padding:0; 
} 

qui fera le bouton soit 38px élevé et les lettres seront en haut à gauche du bouton. Ensuite, vous pourriez ajouter peut-être ceci:

text-align:center; 
padding-top:10px; // or how much is needed to be verticaly centered.