我有一个菜单,在某些情况下某些元素会显示一个小红框(想想 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 :
最佳答案
不确定确切原因,但您的字体大小格式似乎没有按预期工作。对于您链接的示例,如果您只是将 noticount
类的 font-size
从 em
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;
}
编辑:
根据我在下面的第二条评论,我进一步调查了这个问题。作为this JSFiddle显示,如果从 ul 中删除
和 font-size: 0;
,则可以保持 .noticount
的 font-size
相对#moomenuul#moomenu li
。我不确定将这些设置为 0
的目的是什么,但假设您在 ul 上使用
和 px
(而不是 em
) #moomenu aul#moomenu ul a
我建议使用我的第一个建议修复方法,因为它与您在 css 中设置的其他字体大小一致。
关于javascript - Div 内容不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24267600/