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;
    }

现为超文本:

<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>

rel=“nofollow”>Jsfiddle.net<<

Problem: When I run the code in Chrome, IE9, all looks well, i.e. the blue squares in the middle are sitting on the red line (parent). However, when I run this in Firefox, their appears a sit slightly below the parent. You can see the thin red line peeking out on top of the blue squares.

为什么如此,我如何解决这一问题。

Answer 1

上网检查。

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

Answer 2

@salman Khan; give inline-block to your #feature_tabs_indicators ul li .

由于<代码>inline 内容从不垂直margin & pavention ,因此li s不能在母体内。因此,<代码> 仅采用文本的<代码>hal。

http://www.max Design.com.au/articles/inline/"rel=“nofollow” http://www.max Design.com.au/articles/inline/。

友情链接