Style de bouton submit et CSS pour IE
Pour Firefox, et Chrome input[type=button]:hover,input[type=submit]:hover
et input[type=button],input[type=submit]
va faire le travail, mais que faire avec IE (8)?
@Herohtar:
- Ils faire? Comment est-ce? Je suis à l'aide de css et ils ne fonctionnent pas:
input[type=button],input[type=submit]
{
border-right-color: black;
border-right-style: solid;
border-right-width: 1px;
border-left-color: black;
border-left-style: solid;
border-left-width: 1px;
border-bottom-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: black;
border-top-style: solid;
border-top-width: 1px;
text-align: center;
font-weight: bold;
height: 30px;
font-family: Georgia,'Times New Roman',times,serif;
color: #000000;
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
background: #fceabb; /* old browsers */
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* ie */
}
input[type=button]:hover,input[type=submit]:hover
{
color: black;
border-radius: 6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
background: #ffb76b; /* old browsers */
background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* ie */
}
OriginalL'auteur guest86 | 2011-01-16
Vous devez vous connecter pour publier un commentaire.
input[type=submit]
etinput[type=button]
travaillent tous les deux dans IE8, ainsi qu'avec les :hover condition.Edit: Le CSS que vous avez énumérés, il fonctionne parfaitement pour moi dans IE8: http://jsfiddle.net/dnZNE/ Peut-être quelque chose d'autre dans votre feuille de style CSS est primordial?
+1 sélecteur d'attribut ne fonctionnent bien dans IE8, mais pas dans IE6.
Je ne suis pas sûr de ce que tu veux dire, avez-vous juste que seule ligne, ou est-il de plus? Aussi, serait-il possible de voir la page?
J'aime le site lié ici, mais MAINTENANT je SUIS TOTALEMENT CONFUS! Quand je colle mon code html et css il y, la page est affiché juste la façon dont il devrait être!
La page est http://www.rssmagnet.net/en/login.php (lorsque vous regardez comment il ressemble dans IE, vous allez comprendre pourquoi je veux le refaire :P)
OriginalL'auteur Herohtar
Si il est possible d'utiliser jQuery (www.jquery.com):
$(':submit').css( 'attribute', 'value' );
Si ce n'est pas que je crains que vous devez ajouter une classe pour ces boutons.
Eh bien, le problème est probablement avec le [type=submit], et non le "hover". Je n'ai pas vraiment IE8 pour le tester, mais je me souviens que c'est un problème dans IE7. Une solution a été d'utiliser jQuery pour fixer IE bizarreries, l'autre était d'écrire un nom de classe. Mais encore une fois - IE8 est possible que ça fonctionne très bien avec les deux sélecteurs.
C'est peut-être la seule solution, à moins que vous pouvez comprendre pourquoi le CSS fonctionne par le biais de jsfiddle et à mettre en œuvre que... ce n'est pas vraiment trop difficile à mettre en œuvre des effets de survol à l'aide de jQuery.
je n'ai jamais utilisé jQuery, n'ont aucune idée à ce sujet (bien que, je suis ok avec Javascript).
Essayez-la. Il est discret (lorsqu'il est utilisé correctement), propre et très rapide. Il y a beaucoup de bons exemples sur leur site web jquery.com).
OriginalL'auteur Chris Hasiński