Problema dell'altezza della linea Cufon

Question

Quando applico l'altezza della linea in CSS o in javascript, non lo fa. E se applico lo script, ottengo il seguente errore.

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;} 

Answer 1

C'è un known bug in Cufon that will probably not be fixed per quanto riguarda il riconoscimento traballante line-height sulle pagine con doctype non rigide.

Answer 2

Una soluzione che abbiamo (@markedup in realtà) abbiamo trovato è quello di avvolgere un arco intorno al testo all'interno dell'elemento si stanno avendo problemi con, in modo da:

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

Aggiungi padding inferiore sulla durata bambino e il gioco è madri fratello.

Utilizza un po 'di codice in più ma è meglio che specificare il doctype errato, con il risultato di potenziali pagine non valide e css b0rked.

Cheers.

Answer 3

anche il seguente stile CSS ha lavorato per me senza modifiche Doctype (come il post di Keith prima)

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

Acclamazioni

Answer 4

non posso fare a parlare:

{line-height: '120%;', 

potresti voler cambiare questo in:

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

poiché i parser javascript potrebbero interrompersi sull'operatore '-' ..

Answer 5

Ho risolto il problema come segue. Cufon crea i tag <cufon> pronti per il documento. Definisco uno stile CSS come questo nel mio documento .css. (Il mio Cufon testo nella classe .HeaderArea)

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

Answer 6

so che potrei essere un po 'in ritardo alla festa Cufon, ma ho letto alcune delle soluzioni utilizzando il margine, al di sopra. Ho provato questo, ma nel mio caso, avevo bisogno di una linea "più stretta". Ho provato un valore negativo ma ancora non ha funzionato. Ho capito che è necessario visualizzare i tag generati da cufon per bloccare.

Ecco un frammento di codice:

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

Questo sembra funzionare a meraviglia.

Buona fortuna. È un mondo pericoloso.

Answer 7

Questo funziona per me:

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

Answer 8

Per le persone che sono ancora alla ricerca di una risposta.
Ogni parola è separato da Cufon in elementi di blocco

Quindi provare questo:

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

Answer 9

Per line-height di lavorare con Cufon, è necessario modificare quanto sopra nel DOCTYPE Strict

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