CSS - Firefox - Получение дочерних элементов внутри родительского элемента

Question

Все,

Вот код.

#feature_tabs_indicators {
display: block;
height: 14.5px;
background-color: rgb(244,1,87);
}
#feature_tabs_indicators ul {
    display: block;
    height: 14.5px;
    text-align: center;
    padding: 0;
    margin: 0 auto;
}
    #feature_tabs_indicators ul li {
        display: inline;
        width: auto;
        height: 14.5px;
        list-style-type: none;
        background-color: rgb(34,61,166);
        padding: 0 5px;
        margin: 0;
    }

Теперь HTML:

<div id="feature_tabs_indicators">
        <ul>
            <li id="ind_bt" class="c_ind">.</li>
            <li id="ind_st" class="c_ind">.</li>
            <li id="ind_lc" class="c_ind">.</li>
            <li id="ind_rb" class="c_ind">.</li>
            <li id="ind_lg" class="c_ind">.</li>
        </ul>
    </div>

Jsfiddle.net

Проблема: Когда я запускаю код в Chrome, IE9, все выглядит хорошо, то есть синие квадраты в середине сидят на красной линии (родитель).Однако, когда я запускаю это в Firefox, они появляются чуть ниже родительского.Вы можете видеть тонкую красную линию, выглядывающую поверх синих квадратов.

Почему это так и как я могу решить эту проблему.

Answer 1

Проверьте inline-inline-block на вашей LI.

 #feature_tabs_indicators ul li {
            display: inline-block;
...
}

Answer 2

@ Салман Хан;отдайте inline-block своему #feature_tabs_indicators ul li.

Причину, по которой li's не входит внутрь родительского элемента, поскольку элемент inline никогда не принимает вертикальный margin & padding.Вот почему parent принимает height только текста.

проверить эту статью http://www.maxdesign.com.au/articles/inline/