Div内容不出现

我有一个菜单，在某些情况下，某些项目显示一个小红框（认为Facebook的朋友计数）。Div内容不出现

我最近重新设置了目标菜单的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; 
}

我检查的页面sounce等股利结束了我的JavaScript设置正确的值看起来像这样：

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

我能得到这个实际显示的唯一方法是通过手动黑客攻击现场CSS和设置宽度和高度，然后显示没有问题。

真的是奇怪的是内容“1”从来没有在div中显示过。非常困惑这一点，真的不知道该怎么尝试。

不知道这是重要的还是与FireBug怪异，但有时这个div出现在代码视图略有tranparanent，通常会忽略一个元素display:none，我没有得到。

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

编辑

这里是显示问题小提琴：

http://jsfiddle.net/UYa5Z/

来源

2014-06-17 Jammer

你能在小提琴中重现这个吗？ – j08691

所以当你检查它，1是，或不在div中出现？ – Kolby

你的jQuery在哪里？ – LGVentura

不确定具体原因，但看起来您的字体大小的格式不能按预期工作。以你链接的例子来说，如果你简单地将noticount类的font-size从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; 
}

JSFiddle

编辑：

根据我的第二个评论下面，我研究这个问题进一步。如this JSFiddle所示，如果您从ul#moomenu和ul#moomenu li中删除font-size: 0;，则可以保留.noticount的相对位置为font-size。我不确定将0设置为0的目的，但是如果您在ul#moomenu a和ul#moomenu ul a上使用px（而不是em），我建议使用我的第一个建议的修复程序，因为它与您在其中设置的其他字体大小一致CSS。

来源

2014-06-17 16:05:39 user3507600

不错的一个！这只会增加混乱，但确实解决了这个问题。 – Jammer

@Jammer，我完全同意......如果我能找到任何研究或找出存在这个问题的原因，我会让你知道。 – user3507600

得到一些疯狂的奇怪的互动事情。 – Jammer

确保的.noticount亲本与relative位置，将定势的问题

.noticountParent{ 
    position:relative; 
} 

.noticount{ 
    position:absolute; 
}

Html：

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

来源

2014-06-17 15:26:17

父母已经相对定位了，这就是让我困惑的原因。 – Jammer

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

由于.noticount有font-size:0.6em，所产生的字体大小是... 0

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

来源

2014-06-17 15:48:37

你有一个JSFiddle（或者类似的服务）例子吗？我拿出你正在引用的'font-size：0'，并且仍然看到OP描述的问题。 – user3507600

@ user3507600显然还有另一个地方。等一下。 –

[Fixed]（http://jsfiddle.net/UYa5Z/3/），但请注意，由于列表项没有正确的'position：relative'，通知出现在错误的地方。 –

Div内容不出现

回答

相关问题