background-color: inherit ne fonctionne pas sur l'élément d'entrée sur IE 8/9/10

Si j'ai un div avec un explicite couleur de fond de l'ensemble, et un élément d'entrée à l'intérieur, avec la couleur d'arrière-plan définie à 'inherit', alors qu'il fonctionne comme prévu sur Chrome, Firefox et Safari, mais ne fonctionne pas sur IE 8, 9, ou 10.

Voici un exemple minimal qui illustre bien le problème: jsbin exemple

La zone de texte doit avoir la même couleur de fond. Lorsque vous passez la souris sur la div, la couleur de fond de la div changements, et l'entrée doit changer aussi. Lorsque vous cliquez sur dans l'entrée, il y a :focus règle qui remplace la hériter.

  • C'est un bon! Un subtil ordre d'empilement de la croix-problème de navigateur...
  • Qui est assez ennuyeux. Pour info je le vois aussi sur IE 11, mais pas sur le Bord. Un autre jsfiddle mettant en évidence le problème: jsfiddle.net/ctn5j8m3/1
InformationsquelleAutor Elbin | 2013-07-05
  1. 17

    J'ai été en mesure d'obtenir l'effet que vous avez voulu en utilisant le code CSS suivant:

    div.container {
    margin: 50px;
    padding: 10px;
    background-color: #aaa;
}
div.container input {
    background-color: transparent;
    border-width: 0;
}
div.container:hover {
    background-color: yellow;
}
div.container input:focus {
    background-color: white;
}

    Pour une raison quelconque, l'héritage avec la couleur d'arrière-plan de la propriété dans IE10 semble être mis en œuvre différemment que les autres navigateurs.

    Réglage de la couleur d'arrière-plan à transparent au lieu de inherit semble fonctionner.

    Vous pouvez voir le résultat à la démo: http://jsfiddle.net/audetwebdesign/kTM2f/

    Je voudrais avoir une meilleure explication, mais au moins nous avons un travail autour de.

    Bug avec IE8

    Je viens de lire ce qui suit relativement à la question:

    Les zones d'entrée avec un fond transparent ne sont pas cliquables dans IE8

    Réglage background-color: transparent sur un champ de saisie semble pour désactiver le champ de saisie dans IE8.

    Dans ce cas, le CSS devrait être le plus explicite version:

    div.container {
    margin: 50px;
    padding: 10px;
    background-color: #aaa;
}
div.container input {
    background-color: #aaa;
    border-width: 0;
}
div.container:hover {
    background-color: yellow;
}
div.container:hover input {
    background-color: yellow;
}
div.container input:focus {
    background-color: white;
}
    InformationsquelleAutor Marc Audet
  2. 9

    Ne background-color:transparent-être la solution acceptable?

    • Oui ça fonctionne bien
    InformationsquelleAutor Ilya Streltsyn
  3. 0

    ajouter un !important à votre règle de propriété:

    input {
  background-color: inherit !important;
  border-width: 0;
}
    InformationsquelleAutor anonym