Проблема высоты линии Cufon

Question

Когда я применяю высоту строки в CSS или в javascript, он этого не делает. И если я применяю в сценарии, я получаю следующую ошибку.

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

Существует известная ошибка в Cufon, которая, вероятно, не будет исправлена ​​ в отношении распознавания нестабильной высоты строки на страницах с нестрогими типами документов.

Answer 2

Кроме того, следующий стиль CSS работал для меня без изменения Doctype (как и в посте Кейта ранее)

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

Приветствия

Answer 3

Одно решение, которое мы ( @ markup на самом деле) нашли, заключается в том, чтобы обернуть текст вокруг текста внутри элемента, с которым у вас возникли проблемы, поэтому:

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

Добавить нижний отступна дочернем промежутке и Бобе, брате твоей мамы.

Использует немного дополнительного кода, но лучше, чем указание неверного типа документа, что приводит к потенциально недействительным страницам и b0rked css.

Cheers.

Answer 4

Чтобы высота строки работала с Cufon, вам нужно изменить вышеприведенное значение на Strict DOCTYPE

Посещение: http://xsdesigns.se/2012/08/not-just-seo-but-a-little-bit-of-coding-tips-as-well-cufon-fonts-and-line-height-problem-fix/

Answer 5

Для людей, которые все еще ищут ответ.
Каждое слово отделяется куфоном в элементах блока

Так попробуйте это:

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

Answer 6

Это работает для меня:

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

Answer 7

Я знаю, что могу немного опоздать на вечеринку с куфоном, но я прочитал некоторые решения, используя маржу выше. Я попробовал это, но в моем случае мне нужна была "более узкая" высота строки. Я попробовал отрицательное значение, но оно все еще не работало. Я понял, что вам нужно отобразить тег, сгенерированный cufon для блокировки.

Вот фрагмент кода:

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

Это похоже на удовольствие.

Удачи там. Это опасный мир.

Answer 8

Я решил проблему следующим образом.Cufon создает <cufon> теги в готовом документе.Я определяю стиль CSS, как это в моем документе .css.(мой текст cufon в классе .HeaderArea)

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

Answer 9

Не могу не упомянуть:

{line-height: '120%;',

, возможно, вы захотите изменить это на:

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

, так как синтаксические анализаторы javascript могут нарушать оператор '-'