Блог

У меня есть меню, в котором при определенных обстоятельствах некоторые элементы отображают маленькую красную рамку (например, количество друзей в 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;
}
  

Я проверил страницу sounce, и мой javascript правильно устанавливает значение, поэтому div в конечном итоге выглядит так:

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

Единственный способ, которым я могу заставить это действительно отображаться, — это вручную взломать live CSS и установить ширину и высоту, после чего он отображается без проблем.

Действительно странным является то, что содержимое «1» также никогда не отображается в div. Очень смущен этим и действительно не знаю, что попробовать.

Не уверен, является ли это значительным или странным для FireBug, но иногда этот div появляется в представлении кода слегка непараметрическим, что обычно указывает на то, что элемент display:none , который я тоже не получаю.

Что я могу попытаться решить?

Редактировать

Вот скрипка, отображающая проблему:

http://jsfiddle.net/UYa5Z/

 .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

Редактировать:

Основываясь на моем втором комментарии ниже, я исследовал проблему дальше. Как показывает этот JSFiddle, вы можете сохранить .noticount ‘s font-size relative, если удалите font-size: 0; из обоих ul#moomenu и ul#moomenu li . Я не уверен, какова цель их установки 0 , но, учитывая, что вы используете px (вместо em ) on ul#moomenu a , и ul#moomenu ul a я бы предложил использовать мое первое предложенное исправление, поскольку оно согласуется с другими размерами шрифтов, которые вы устанавливаете в своем css.

Убедитесь, что родительский элемент .noticount имеет relative позицию, которая решит проблему

 .noticountParent{
     position:relative;
}

.noticount{
     position:absolute;
}
  

HTML:

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

Ваш ul#moomenu и ul#moomenu li определить font-size:0

Поскольку .noticount имеет font-size:0.6em , результирующий размер шрифта равен… 0

Размер шрифта, равный нулю, невидим.