Problem z wysokością linii Cufon

Question

Kiedy stosuję wysokość linii w CSS lub w javascriptu, nie robi się tego. A jeśli zgłoszę się w skrypcie, pojawia się następujący błąd.

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

Jest known bug in Cufon that will probably not be fixed dotyczące łuszcząca uznanie line-height na stronach innych niż ścisłych doctypes.

Answer 2

Jedno rozwiązanie my (@markedup faktycznie) odkryli jest owinąć rozpiętość całego tekstu wewnątrz elementu masz problemy z tak:

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

Dodaj dolną osłonę od rozpiętości dzieci i Boba wasze matki brat.

Używa nieco dodatkowego kodu, ale lepiej niż określa niewłaściwy typ dokumentu, co powoduje potencjalne nieprawidłowe strony i b0rked css.

Pozdrawiam.

Answer 3

także następujące CSS stylizacji pracował dla mnie bez zmian DOCTYPE (jak post z Keithem wcześniej)

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

Cheers

Answer 4

nie mogę pomóc, mówiąc:

{line-height: '120%;', 

możesz to zmienić w:

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

ponieważ parsery javascript mogą włamać się na operator "-" ..

Answer 5

Rozwiązałem problem w następujący sposób. Cufon tworzy znaczniki <cufon> w gotowym dokumencie. Definiuję taki styl CSS w moim dokumencie .css. (Mój cufon Tekst w klasie .HeaderArea)

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

Answer 6

wiem, że mogę być trochę późno do partii Cufon, ale czytałem niektóre rozwiązania z wykorzystaniem marży powyżej. Próbowałem tego, ale w moim przypadku potrzebowałem "ściślejszej" linii wysokości. Próbowałem ujemną wartość, ale nadal nie działa. Zorientowałem się, że musisz wyświetlić wygenerowany przez cufon tag do blokowania.

Oto fragment kodu:

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

To wydaje się działać leczeniu.

Życzymy powodzenia. To niebezpieczny świat.

Answer 7

Działa to dla mnie:

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

Answer 8

Dla ludzi, którzy wciąż szukają odpowiedzi.
Każde słowo jest oddzielone Cufon w elementach blokowych

Więc spróbuj tego:

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

Answer 9

Do line-height pracować z Cufon, trzeba zmienić powyższe pod Strict DOCTYPE

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