css bouton envoyer / a href cross-browser
Je veux que mes boutons de soumission + liens regarder comme des boutons et la même dans tous les navigateurs.
Firefox 3.5 joue de nice. Mais IE6,7,8 ont tous les regards différents. Pouvez-vous m'aider (apparemment) simple tâche?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Crossbrowser css submit button, links</title>
<style type="text/css">
button {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
input {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
a {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
text-decoration:none;
}
</style>
</head>
<body>
<a href="#">Buy now</a>
<input type="submit" value="Buy now" />
<button type="submit">Buy now</button>
</body>
</html>
OriginalL'auteur Cudos | 2009-07-18
Vous devez vous connecter pour publier un commentaire.
Vous pouvez remplacer le bouton Soumettre avec une image de la même manière que vous le faites avec un background-image pour un lien. Simplement se débarrasser de l'arrière-plan et des frontières, mettre en arrière-plan, l'url dans le sélecteur d'entrée, et de lui donner le droit de largeur et de hauteur.
Je n'ai pas tout à fait le comprendre. Mais cela met une image de fond sur le bouton d'entrée. Il vous faut ensuite ajouter à cela une bonne largeur & hauteur de la déclaration, et le bouton d'entrée serait l'image. Vous pourriez aussi avoir à se débarrasser de tout le texte du bouton, comme la valeur par défaut "Soumettre la Requête" du texte.
Un moyen utile pour se débarrasser du texte (dans un conditionnelle IE commentaire) appliquer le style line-height: 0; tant que votre bouton d'entrée a une largeur et une hauteur, vous serez au top.
OriginalL'auteur Tyler Carter
Pour le bouton au lieu de
type="submit"
utilisationtype="image"
.Par exemple:
Pour le lien, vous pouvez utiliser les css pour définir l'arrière-plan de votre lien:
OriginalL'auteur czuk
Je le prends de vous faire comprendre que vous n'aurez jamais à chercher exactement le même, car même dans Firefox 3.5 elles ne donnent pas exactement la même chose pour moi.
Et en dehors de purement le style, ils auront toujours un comportement différent. Par exemple, les boutons ne répondent différemment à la tabulation ou la souris (certains navigateurs "déprimer" le texte), les boutons ne s'affichent pas de l'URL-ils point à en contraste avec des liens, et vous pouvez sélectionner le texte d'un lien, mais pas celle d'un bouton.
Vous pouvez corriger les différences les plus flagrantes sur IE6 et 7 assez facilement, cependant.
Ajoutez à cela le CSS pour vos boutons (
<button>
et<input>
):Vous pouvez mettre à l'intérieur une feuille de style pour IE6/7, mais cela ne devrait pas affecter n'importe quel autre navigateur, depuis
visible
est en fait la valeur par défaut. Mais pour une raison quelconque, cela corrige les incohérences avec le rembourrage, par rapport à celle pour le lien, sur IE6 et IE7.Et ajoutez la ligne suivante dans le fichier CSS pour le lien. Tous les navigateurs ont besoin de ce, à faire le lien se comportent plus comme un élément de bloc, comme les boutons:
OriginalL'auteur mercator
Je sais que c'est une vieille question, mais j'ai récemment rencontré ce problème et je ne voulais pas utiliser toutes les images dans ma mise en page. La solution que j'ai trouvé (après avoir fait les liens blocs, comme d'autres l'ont suggéré) a été explicitement l'installation des frontières, les polices et les couleurs d'arrière-plan. Pour obtenir les frontières de match, les définir séparément. À l'origine, j'ai essayé d'utiliser d'emblée frontières, mais j'ai eu plus de succès à l'aide de solides frontières avec des couleurs spécifiques pour le haut, à gauche, en bas et à droite. (J'ai choisi les couleurs en fonction de ce que firefox a l'aide de son départ frontières.) Espérons que cela aide quelqu'un. Aussi, l'ajout d'un border-radius pour les liens et les boutons en fait un peu plus propre.
OriginalL'auteur dubious
Si vous voulez un aspect uniforme, vous aurez besoin d'utiliser une image de bouton soumettre.
OriginalL'auteur chaos
Vous pouvez toujours utiliser un framework JavaScript pour remplacer l'élément avec celui qui est le plus à styliser ou de l'utilisation MSIE conditionnelle de commentaires pour le navigateur spécifique style.
Triste vérité est cross-browser pixel perfection semble impossible avec de la pure CSS et les boutons.
OriginalL'auteur Alan Plum