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

检查LI的内联阻止内联。

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

Answer 2

@salman Khan;将inline-block提供给#feature_tabs_indicators ul li。

li's未进入父级的原因，因为inline元素从不采用垂直margin & padding。这就是parent仅获取文本的height的原因。

查看这篇文章http://www.maxdesign.com.au/articles/inline/

CSS - Firefox - 让Child元素位于父元素内

2 个答案: