Question

我有一个菜单，在某些情况下某些项目显示一个小红框（想想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会出现在代码视图中，略显透明，这通常会忽略一个元素display:none，而我也没有。{/ p>

我可以尝试解决这个问题？

修改

这是一个显示问题的小提琴：

http://jsfiddle.net/UYa5Z/

Answer 1

不确定确切原因，但似乎字体大小的格式无法正常工作。通过您链接的示例，如果您只是将font-size类的noticount从em基于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; }，则可以解决此问题。

.noticount

JSFiddle

修改

根据我在下面的第二条评论，我进一步调查了这个问题。如this JSFiddle所示，如果您从font-size和font-size: 0;移除ul#moomenu，则可以保留ul#moomenu li 0亲戚。我不确定将这些内容设置为px的目的是什么，但是在em和ul#moomenu a上使用ul#moomenu ul a（而不是{{1}}）我建议使用我的第一个建议修补程序，因为它与您在CSS中设置的其他字体大小一致。

Answer 2

确保.noticount的父母有relative位置来解决问题

.noticountParent{
     position:relative;
}

.noticount{
     position:absolute;
}

HTML：

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

Answer 3

您的ul#moomenu和ul#moomenu li定义font-size:0

由于.noticount有font-size:0.6em，因此生成的字体大小为... 0

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

Div内容不显示

3 个答案: