CSS - Firefox - 让子元素位于父元素内
所有，
这是代码。
#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>
问题： 当我在 Chrome、IE9 中运行代码时，一切看起来都很好，即中间的蓝色方块位于红线（父线）上。然而，当我在 Firefox 中运行它时，它们的位置似乎略低于父级。您可以看到蓝色方块顶部有一条细红线。
这是为什么？我该如何解决这个问题。
All,
Here is the code.
#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;
}
An now the 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>
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.
Why is this and how can I resolve this.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在 LI 上检查 inline 到 inline-block。
Check inline to inline-block on your LI.
@萨尔曼·汗；将
inline-block赋予您的#feature_tabs_indicators ul li。li's之所以不进入父级，是因为inline元素从不采用垂直margin 和margin。填充。这就是为什么parent仅采用文本的高度。查看这篇文章http://www.maxdesign.com.au/articles/inline/
@salman Khan; give
inline-blockto your#feature_tabs_indicators ul li.The reason why
li'snot come inside the parent becauseinlineelement never take verticalmargin & padding. That's whyparenttake theheightof the text only.check this article http://www.maxdesign.com.au/articles/inline/