Cufon线高问题
当我在 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%'});
});
样式.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;}
When I apply line-height in CSS or in javascript, it does not do it. And if I apply in the script, I get the following error.
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;}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
我知道我参加 cufon 聚会可能有点晚了，但我阅读了上面的一些使用 margin 的解决方案。我尝试过这个，但就我而言，我需要“更紧”的行高。我尝试了负值，但仍然不起作用。我发现你需要显示 cufon 生成的标签来阻止。
这是一个代码片段：
这似乎很有效。
祝你好运。这是一个危险的世界。
I know I might be a little late to the cufon party, but I read some of the solutions using margin, above. I tried this, but in my case, I needed a "tighter" line-height. I tried a negative value but it still didn't work. I figured out that you need to display the cufon generated tag's to block.
Here's a code snippet:
This seems to work a treat.
Good luck out there. It's a dangerous world.
这对我有用：
This works for me:
对于那些仍在寻找答案的人。
块元素中的每个单词均由 Cufon 分隔，
因此请尝试以下操作：
For the people who are still looking for an answer.
Every word is separated by Cufon in block elements
So try this:
我已经解决了这个问题，如下。 Cufon 在文档准备就绪时创建
我在 .css 文档中定义了这样的 CSS 样式。 （我的 cufon Text 在 .HeaderArea 类中）
I've solved the problem as follows. Cufon creates
<cufon>tags at document ready.I define a CSS style like this in my .css document. (my cufon Text in the .HeaderArea class)
为了使 line-height 与 Cufon 配合使用，您需要将上述内容更改为严格的 DOCTYPE
访问：http://xsdesigns.se/2012/08/not-just-seo -但是一点点编码技巧以及cufon字体和行高问题修复/
For line-height to work with Cufon, you need to change the above into the Strict DOCTYPE
Visit:http://xsdesigns.se/2012/08/not-just-seo-but-a-little-bit-of-coding-tips-as-well-cufon-fonts-and-line-height-problem-fix/
Cufon 中存在一个可能无法修复的已知错误 关于具有非严格文档类型的页面上不稳定的行高识别。
There is a known bug in Cufon that will probably not be fixed regarding flaky line-height recognition on pages with non-strict doctypes.
另外，以下 CSS 样式对我有用，无需更改 Doctype（如 Keith 之前的帖子）
干杯
Also the following CSS styling worked for me without Doctype change (like the post from Keith before)
Cheers
我们（@markedup 实际上）找到的一种解决方案是在您拥有的元素内的文本周围包裹一个跨度问题，所以：
在子跨度上添加底部填充，鲍勃是你母亲的兄弟。
使用一些额外的代码，但比指定错误的文档类型更好，从而导致潜在的无效页面和 b0rked css。
干杯。
One solution we (@markedup actually) have found is to wrap a span around the text inside the element you are having issues with, so:
Add bottom padding on the child span and bob's your mothers brother.
Uses a bit of extra code but better than specifying the wrong doctype, resulting in potential invalid pages and b0rked css.
Cheers.
我忍不住提一下：
你可能想将其更改为：
因为 javascript 解析器可能会在“-”运算符上中断..
I can't help to mention:
you might want to change this into:
since javascript parsers might break on the '-' operator..