Héritage CSS pour la couleur d'arrière-plan inconnue est réellement transparent

Je suis entrain de créer un onglet fonctionnalités avec <ul> et <li> éléments, et j'ai remarqué ce genre de comportement inattendu avec CSS background-color: inherit.
On pourrait s'attendre à ce que inherit ne signifient pas transparent, mais plutôt child.background-color == parent.background-color (pardon pour le pseudo-code).

Mon code est assez simple, mais j'ai un problème: je suis en développement pour des conditions variables. Cela signifie que je n'ai jamais pu savoir quelle couleur de fond sera utilisé avec mon code, et je ne veux pas introduire de mon propre.

J'ai préparé un JSFiddledans lequel le fond est définie de façon aléatoire au chargement de la page, de façon à imiter le caractère aléatoire de mon code de destination. Le problème évident est que l'onglet actif est horrible avec sa couleur d'arrière-plan pré-défini. Donc, je l'ai changé pour background-color: inherit. (voir JSFiddle 2)

Alors que de toute évidence, cela a résolu le fond, la bordure de l'élément ci-dessous (cg_content) a commencé à montrer de nouveau, parce que le inherit de propriété, les actes de transparentau lieu de ce qu'il fait quand il y a un jeu de couleur d'arrière-plan.

Question est: Est-il un moyen de le faire hériter de la réelle couleur d'arrière-plan sans Javascript?
Si non, pourriez-vous suggérer une meilleure façon de faire de ces onglets air bien, sans pré-définir les couleurs?

P. S.: Le contenu <div> ne doit pas être un élément enfant de l' <li> éléments, comme ces onglets partager certains contenus.
P. S. 2: je ne peux pas faire plus clair, que j'ai évidemment savoir comment faire cela avec le JS. Je ne veux pas.

source d'informationauteur mavrosxristoforos