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 - 子元素坐在父元素內

回答

相關問題