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>

Jsfiddle.net

问题：当我运行在Chrome，IE9的代码，一切看起来很好，即中间的蓝色方形坐在在红线（父母）上。但是，当我在Firefox中运行它时，它们显示为稍低于父级。您可以在蓝色方块的顶部看到细细的红线。

这是为什么，我该如何解决这个问题。

来源

2011-10-07 Kayote

在你的LI上检查内联到内联块。

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

来源

2011-10-07 14:09:29

Diodeus，spot on。谨慎解释为什么或请参考。 – Kayote

内联项不能取高度值，只有块项可以。另外请记住，没有像HALF PIXEL 14.5这样的东西是没有意义的。它会被截断为14. –

感谢Diodeus，这很清楚。 – Kayote

@salman Khan; inline-block给您的#feature_tabs_indicators ul li。

li's之所以没有进入父项，是因为inline元素从不采取垂直margin & padding。这就是为什么parent只采用文本的height。

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

来源

2011-10-07 14:12:11 sandeep

感谢您参考Sandeep。非常感激。 – Kayote

CSS - Firefox - 子元素坐在父元素内

回答

相关问题