impossible d'obtenir plusieurs valeurs pour la décoration de texte affichée

Question

Quelque chose de bizarre - J'essaie d'obtenir un fichier HTML simpel pour montrer à la fois souligné & souligné (mais il arrive aussi sur la "ligne" valeur) pour un texte (écrire cela dans un fichier CSS séparé) mais sur tous les navigateurs que je vérifie cela ne fonctionne pas (J'ai installé Chrome, Firefox, Opera, IE et Safari - tous sont probablement les dernières versions donc rien comme la version 6 de Chrome ...).

Lorsque je supprime les autres valeurs et en spécifie une seule - cela fonctionne mais quand j'en ajoute une autre - tous les effets du style de décoration de texte disparaissent.

Est-ce que quelqu'un connaît un problème de ce style?

merci d'avance.

p.s. Je mets ces valeurs sur la même ligne, par exemple :

h1, h2 { 
    text-decoration: underline, overline, line-through; 
} 

Answer 1

Vous devez les séparer par un espace:

h1, h2 { 
 
     text-decoration: underline overline line-through; 
 
    }

<h1> FUNNY </h1>

Answer 2

Je ne l'ai jamais vu une spécification pour text-decoration d'accepter des valeurs multiples. Voir ici http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration (Apprenez quelque chose de nouveau tous les jours!)

Vous pourriez éventuellement mettre en œuvre d'une manière différente en procédant comme suit.

HTML

<p>Some text here and then <span class="underover">underline and overline</span> and some more text here.</p> 

CSS

.underover { 
    border-width: 1px 0; 
    border-style: solid; 
    border-color: blue blue red red; 
} 

Voir ce codepen pour un exemple: http://codepen.io/keithwyland/pen/Eagbz

Answer 3

                D'accord avec nadavage: J'ai joué aussi et a trouvé: Commas en CSS sont pour si la police ou de la valeur ne sont pas pris en charge. Donc, si je vous écris:

font-family: 'Lorem Ipsum', cursive; 

                Si « Lorem Ipsum » est pas un nom d'une police enregistrée sur le système d'exploitation ou importés, il témoignerait de la police « cursive », pris en charge sur la plupart des navigateurs. Dans votre cas, de faire tous à une fois que vous mettriez l'espace, mais certaines propriétés qui prennent plusieurs paremeters, comme

text-shadow: 2px 2px rgba(0, 0, 0, 0.4); 

s'attendent qu'une seule valeur pour chaque paramètre- La plupart des navigateurs peuvent déchiffrer les valeurs qui sont pour quel paramètre et quoi utiliser.

Espérons que cela aide!