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內容不出現

回答

相關問題