Javascript 未显示Div内容

我有一个菜单，在某些情况下，某些项目会显示一个小红色框（想想facebook好友计数）

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

这是一个简单的div，如下所示：

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

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

我已经检查了页面sounce，我的javascript正确设置了该值，因此div的结果如下所示：

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

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

1

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

真正的奇数位是内容“1”也不会显示在div中。对此非常困惑，真的不知道该尝试什么

不确定这对FireBug来说是重要的还是奇怪的，但有时这个div会出现在代码视图中，这通常表明某个元素是

display:none

，我也不知道

我能试着解决这个问题吗

编辑

下面是一个显示问题的提琴：

---

确保

.noticount

的父项具有解决问题的

相对位置

.noticountParent{
     position:relative;
}

.noticount{
     position:absolute;
}

Html:


1.
您的
ul#moomenu
和
ul#moomenu li
定义
字体大小：0

由于
.noticount
具有
字体大小：0.6em
，因此生成的字体大小为<代码>0

---

字体大小为零是不可见的。

不确定确切原因，但您的字体大小的格式似乎没有按预期工作。在您链接的示例中，如果您只需将

noticount

类的

font size

从

em

based更改为

px

based，似乎可以解决问题

.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;
}

编辑：

---

根据我下面的第二条评论，我进一步调查了这个问题。如图所示，如果删除

字体大小：0，则可以保持
.noticount
的
字体大小
相对来自
ul#moommenu
和
ul#moommenu li
。我不确定将它们设置为
0
的目的是什么，但如果您使用
px
（而不是
em
）在
ul#moodmenu-a
和
ul#moodmenu-ul-a
上，我建议使用我的第一个建议修复，因为它与css中设置的其他字体大小一致。
你能用小提琴重现吗？所以当你检查它时，1是，或者没有出现在div中？jQuery在哪里？在这里工作：
。noticount
是绝对定位的，因此它将位于浏览器窗口的左上角，除非它位于非静态定位的某个包含祖先的块中。我们真的需要看到更多的HTML/CSS来理解这个问题。父对象已经是相对位置了，这让我很困惑。您有一个JSFIDLE（或类似的服务）示例来处理这个更改吗？我取出了您正在引用的
font-size:0
，仍然可以看到OP描述的问题。@user3507600显然还有另一个地方。请稍等，但请注意，由于列表项没有正确的
位置：relative
，因此通知出现在错误的位置。很好！这只会增加混乱，但确实解决了问题。@Jammer，我完全同意。。。如果我能找到任何研究或找出这个问题存在的原因，我会告诉你的。一定是发生了一些疯狂的奇怪的交互。你试过用
rem
而不是
em
？@AndrewKoroluk，没有。但是通过@Jammer回到原来的JSFIDLE，它也解决了问题。根据这篇文章，它让我相信黑暗的绝对尼特（Niet the Dark Absol）找到了这个问题的根源（0的60%是0）。有鉴于此，您正在将div的某个父级设置为
0
（有意或无意）。如果您想保持字体大小的相对性，我建议您重新访问在CSS（可能还有JS）文件中设置字体大小的所有位置。