Problème de hauteur de ligne Cufon

Lorsque j'applique line-height en CSS ou en javascript, il ne le fait pas. Et si je postule dans le script, j'obtiens l'erreur suivante.Problème de hauteur de ligne Cufon

Error: missing : after property id 
Line: 26, Column: 44 
Source Code: 
Cufon.replace('#header .lists li a', {line-height: '120%;', font-size: '120%'});

javascript

$(document).ready(function() 
{ 

    Cufon.replace('#header .lists li a', {line-height: '120%;', font-size: '120%'}); 

});

style.css

#header .lists { float:left; position:relative; width:776px; height:40px; list-style:none; padding:0; margin:0; margin-top:1px; background:url(../images/bg_mainmenu_off.gif); z-index:100; } 
#header .lists li {float:left; height:40px; display:inline; background:url(../images/bg_mainmenu_off.gif) repeat-x;} 
#header .lists li a {display:block; width:150px; height:40px; line-height:40px; text-decoration:none; font-size:16px; font-weight:bold; text-indent:10px; font-weight:bold; color:#FFFFFF; margin: 0px; } 
#header .lists li a:hover { background:url(../images/bg_mainmenu_on.gif) repeat-x; } 
#header .lists div {display:none; } 
#header .lists :hover div {display:block; position:absolute; background:#FFFFFF; top:26px; border:1px solid #ece7d1; padding-bottom:10px;} 
#header .lists :hover div dl { float:left; width:179px; display:inline; padding:5px; margin:0 5px 10px 5px;} 
#header .lists :hover div dl dt { width:179px; height:16px; background:#b39f87; margin:5px 0 10px 0; text-decoration:none; } 
#header .lists :hover div dl dd {padding:0; margin:0;} 
#header .lists :hover div dt a { display:block; height:14px; line-height:14px; font-size:14px; color:#FFFFFF; font-weight:bold; text-decoration:none;} 
#header .lists :hover div dt a:hover { background:none;} 
#header .lists :hover div dd a { display:block; height:14px; line-height:14px; font-size:14px; color:#b39f87; font-weight:normal; text-decoration:none; } 
#header .lists :hover div dd a:hover {text-decoration:underline; background:none;}

Source

2010-01-18 Efe Tuncel

La taille de la police est modifiée avec le code suivant, mais la hauteur de ligne ne l'est toujours pas. Cufon.replace ('# header .lists li a', {lineHeight: '12px', fontSize: '12px'}); –

Voici la solution pour la hauteur de ligne cufon :: http://www.xpertdeveloper.com/2012/10/cufon-line-height-problem/ – Avinash

Il y a un known bug in Cufon that will probably not be fixed concernant la reconnaissance ligne hauteur squameuse sur les pages avec doctypes non strictes.

Source

2010-01-18 20:14:29

Je ne l'ai pas encore vérifié dans IE. Je l'ai seulement regardé dans Firefox. –

@Efe. Le doc dit que le bug est dans "Tous les navigateurs". Je pense que cela inclut Firefox. – munch

@Josh: +1 pour le lien. Vous l'avez réellement cherché. Je viens de supposer. – munch

Une solution que nous (@markedup en fait) avons trouvé est d'envelopper une portée autour du texte à l'intérieur de l'élément que vous rencontrez des problèmes avec, donc:

<h1><span>Some text here that is giving you a bit of a headache</span></h1>

Ajouter padding de fond sur la durée de l'enfant et vos mères de bob frère. Utilise un peu de code supplémentaire, mais mieux que de spécifier le mauvais type de document, ce qui entraîne des pages potentiellement invalides et des css b0rked.

Cheers.

Source

2010-03-04 12:22:24

également le style CSS suivant a fonctionné pour moi sans changement Doctype (comme le poste de Keith avant)

div#navigation ul li cufon { 
    padding-bottom: 3px; 
}

Vive

Source

2010-08-19 12:22:36 Silvan

Le plus simple de tous à partir de maintenant. Ou 'div # navigation ul li .cufon' (notez le sélecteur de classe), si vous voulez être un peu plus compatible. –

Pour une raison quelconque, j'ai besoin d'utiliser padding-top au lieu de padding-botton pour que cela fonctionne. Mais cette solution fonctionne parfaitement. –

Je ne peux pas mentionner:

{line-height: '120%;',

vous voudrez peut-être changer cela en:

{'line-height': '120%',

étant donné que les analyseurs syntaxiques javascript peuvent interrompre l'opérateur '-'.

Source

2011-06-14 12:14:50

J'ai résolu le problème comme suit. Cufon crée <cufon> étiquettes au document prêt. Je définis un style CSS comme celui-ci dans mon document .css. (Mon CUFON texte dans la classe .HeaderArea)

.HeaderArea cufon { margin-bottom:10px; }

Source

2011-07-07 11:26:34

Je sais que je pourrais être un peu en retard à la fête de CUFON, mais j'ai lu quelques-unes des solutions en utilisant la marge, au-dessus. J'ai essayé, mais dans mon cas, j'avais besoin d'une hauteur de ligne «plus serrée». J'ai essayé une valeur négative mais cela n'a toujours pas fonctionné. J'ai compris que vous devez afficher les tags générés par cufon à bloquer.

Voici un extrait de code:

.myClass cufon { display: block; float: left; margin-top: -3px!important; }

Cela semble fonctionner un régal.

Bonne chance là-bas. C'est un monde dangereux.

Source

2011-07-13 16:55:26

Cela fonctionne pour moi:

## main-content .cufon-canvas {height: 25px !important;}

Source

2012-01-24 12:00:45 popware

Pour les personnes qui cherchent toujours une réponse.
Chaque mot est séparé par Cufon dans des éléments de bloc

Donc, essayez ceci:

.yourCufonDiv .cufon-canvas {margin-bottom:5px;}

Source

2012-11-05 14:25:48 Jeroen

Pour la ligne de hauteur pour travailler avec Cufon, vous devez changer ce qui précède dans le DOCTYPE strict

visite: http://xsdesigns.se/2012/08/not-just-seo-but-a-little-bit-of-coding-tips-as-well-cufon-fonts-and-line-height-problem-fix/

Source

2014-01-06 19:59:12 user3151705

Problème de hauteur de ligne Cufon

Répondre

Questions connexes