Vấn đề chiều cao dòng Cufon

Question

Khi tôi áp dụng chiều cao dòng trong CSS hoặc trong javascript, nó không làm điều đó. Và nếu tôi áp dụng trong kịch bản, tôi nhận được lỗi sau.

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ó một known bug in Cufon that will probably not be fixed về flaky nhận line-height trên các trang có doctypes không nghiêm ngặt.

Answer 2

Một giải pháp chúng tôi (@markedup thực tế) đã phát hiện ra là để bọc một khoảng xung quanh văn bản bên trong các yếu tố bạn đang gặp vấn đề với, vì vậy:

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

Thêm đệm đáy vào khoảng đứa trẻ và bob của mẹ của bạn em trai.

Sử dụng một chút mã bổ sung nhưng tốt hơn chỉ định loại tài liệu sai, dẫn đến các trang không hợp lệ tiềm năng và css được b0rked.

Chúc mừng.

Answer 3

Ngoài ra phong cách CSS sau làm việc cho tôi mà không DOCTYPE thay đổi (như bài từ Keith trước)

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

Cheers

Answer 4

tôi không thể giúp đỡ để đề cập đến:

{line-height: '120%;', 

bạn có thể muốn thay đổi điều này thành:

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

vì trình phân tích cú pháp javascript có thể vi phạm toán tử '-' ..

Answer 5

Tôi đã giải quyết được sự cố như sau. Cufon tạo các thẻ <cufon> tại tài liệu sẵn sàng. Tôi xác định kiểu CSS như thế này trong tài liệu .css của tôi. (Text cufon của tôi trong lớp .HeaderArea)

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

Answer 6

Tôi biết tôi có thể là một chút muộn để đảng cufon, nhưng tôi đọc một số các giải pháp sử dụng lề, ở trên. Tôi đã thử điều này, nhưng trong trường hợp của tôi, tôi cần một chiều cao dòng "chặt chẽ hơn". Tôi đã thử một giá trị tiêu cực nhưng nó vẫn không hoạt động. Tôi đã tìm ra rằng bạn cần hiển thị thẻ đã tạo của cufon để chặn.

Dưới đây là một đoạn mã:

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

Điều này dường như làm việc một điều trị.

Chúc may mắn ở ngoài đó. Đó là một thế giới nguy hiểm.

Answer 7

này làm việc cho tôi:

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

Answer 8

Đối với những người vẫn đang tìm kiếm một câu trả lời.
Mỗi từ được phân cách bằng cufon trong các yếu tố khối

Vì vậy, cố gắng này:

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

Answer 9

Đối với line-height để làm việc với Cufón, bạn cần phải thay đổi trên vào DOCTYPE nghiêm ngặt

Lượt truy cập: http://xsdesigns.se/2012/08/not-just-seo-but-a-little-bit-of-coding-tips-as-well-cufon-fonts-and-line-height-problem-fix/