Contexte: J'essaie simplement d'avoir un bouton avec deux classes CSS attachées. Le premier est la classe de style général que j'applique à tous mes boutons, .button, et le second est le style spécifique que je veux pour ce bouton particulier que j'ai nommé .button3. Je suis assez nouveau à CSS mais j'ai essayé beaucoup de différentes formes en appelant les classes sur l'élément de bouton et en déclarant les classes dans le CSS mais rien ne change. J'utilise smarty.Pourquoi Chrome n'applique-t-il pas mon deuxième cours CSS sur mon bouton lorsque Safari le fait?
Application class = "bouton Button2" fonctionne en chrome mais pas class = "bouton button3"
Les classes fonctionnent bien dans Safari.
L'exécution du code dans l'aperçu du code SO fonctionne correctement dans Chrome, mais pas sur ma page actuelle.
Ces classes de boutons sont largement basées sur le didacticiel des boutons CSS W3Schools. Dans cet esprit, je pense que c'est un problème très spécifique qui est hors de ma compréhension quand il s'agit de CSS lui-même, Chrome, ou juste quelque chose de très évident, je suis aveugle après avoir travaillé sur des choses pour quelque temps.
-Edit- Aussi, comme le titre le suggère, c'est seulement la deuxième classe (.button3) qui a des problèmes. La première classe (.button) fonctionne à la fois dans Chrome et Safari.
Questions:
Quelle est la différence dans cette situation entre Chrome et Safari?
-et/ou-
Pourquoi est-ce que class = "bouton Button2" fonctionne dans Chrome, mais class = "bouton button3" ne fonctionne pas?
.button {
background-color: whitesmoke;
border: none;
color: black;
padding: 5px 15px;
margin: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
border: 1px solid black;
/*border-radius: 8px;*/
}
.button2 {
color: white;
padding: 5px 7px;
background-color: #f44336; /*red*/
border: 1px solid #f44336;
/*border-radius: 75%;*/
}
.button2:hover {
background-color: whitesmoke;
color: black;
}
.button3 {
color: white;
padding: 5px 7px;
background-color: lightseagreen;
border: 1px solid lightseagreen;
}
.button3:hover {
background-color: whitesmoke;
color: lightseagreen;
}<button class="button button3" type="submit" value="Submit"> Submit </button>-Edit 2- J'ai trouvé la source du problème. Il semble que mon fichier CSS en cours d'exécution sur mon localhost se termine brusquement avant qu'il atteigne mes classes .button3. Je cherche pourquoi cela peut être, mais n'ai rien trouvé qui le causerait pour le moment.
Que ne fonctionne pas exactement? Sur Chrome 56 '.button3' est appliqué – sol
@ovokuro De mon côté, seul le style général de' .button' est appliqué. Je n'obtiens pas les couleurs de bordure, les couleurs de police ou les effets de survol appropriés de '.button3' lorsque vous utilisez Chrome. Il est utile de savoir que cela fonctionne pour vous si – Von
@Von: En fait, ce n'est pas très utile puisque probablement ovokuro base son observation sur votre extrait exécutable, que vous dites fonctionne pour vous aussi. S'il existe un moyen de reproduire votre problème quelque part vers lequel vous pouvez vous relier, je pense que cela ira un long chemin. – BoltClock