javascript - Div 内容不显示

标签 javascript jquery html css

我有一个菜单,在某些情况下某些元素会显示一个小红框(想想 facebook 好友数)。

我最近重做了针对菜单的 css,但没有任何改变会导致我看到的问题。

这是一个像这样的简单 div:

<div id="request-count" class="noticount"></div>

CSS 看起来像:

.noticount {
    background: none repeat scroll 0 0 #E43C03;
    color: #FFFFFF;
    font-size: 0.6em;
    font-weight: bold;
    position: absolute;
    top: 3px;
    left: 3px;
    text-align: center;
}

我检查了页面声音,我的 javascript 正确设置了值,所以 div 最终看起来像这样:

<div id="request-count" class="noticount">1</div>

我能让它真正显示出来的唯一方法是手动修改实时 CSS 并设置宽度和高度,然后它就会毫无问题地显示出来。

真正奇怪的一点是内容“1”也从不显示在 div 中。对此非常困惑,真的不知道该尝试什么。

不确定这对 FireBug 来说是重要的还是奇怪的,但有时这个 div 出现在代码 View 中有点透明,这通常会否认元素是 display:none 而我也没有得到。

我可以尝试解决这个问题吗?

编辑

这是一个显示问题的 fiddle :

http://jsfiddle.net/UYa5Z/

最佳答案

不确定确切原因,但您的字体大小格式似乎没有按预期工作。对于您链接的示例,如果您只是将 noticount 类的 font-sizeem based 更改为 px 基于它似乎解决了这个问题。

.noticount {
    background: none repeat scroll 0 0 #E43C03;
    color: #FFFFFF;
    font-size: 10px; /* this instead of font-size: 0.6em */
    font-weight: bold;
    position: absolute;
    top: 3px;
    left: 3px;
    text-align: center;
}

JSFiddle

编辑:

根据我在下面的第二条评论,我进一步调查了这个问题。作为this JSFiddle显示,如果从 ul 中删除 font-size: 0;,则可以保持 .noticountfont-size 相对#moomenuul#moomenu li。我不确定将这些设置为 0 的目的是什么,但假设您在 ul 上使用 px(而不是 em) #moomenu aul#moomenu ul a 我建议使用我的第一个建议修复方法,因为它与您在 css 中设置的其他字体大小一致。

关于javascript - Div 内容不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24267600/

相关文章:

javascript - 使用 package.json 脚本中的参数调用 javascript 函数

javascript - Node 模块。私有(private)变量被重置

javascript - 匹配任何数字的正则表达式模式包括 1-9 除了 2

javascript - 遍历所有表单字段

php - 简单的 PHP 电子邮件表单不起作用

javascript - 动画/s 窃听之前它完成

javascript - 触摸 Microsoft Surface 设备(桌面)时在边框上发出声音的功能

JavaScript 数组到对象?

jquery - SEO友好性是否胜过优雅?

HTML - 停靠元素