li with display：inline-block;屬性在谷歌Chrome瀏覽器和Safari

跳下來我試圖建立一個網站，並遇到一個棘手的問題，李有顯示：inline-block;屬性。li with display：inline-block;屬性在谷歌Chrome瀏覽器和Safari

我的網站是：http://www.gypsytours.in/

如果你訪問這個網站，在主頁上，我有標題爲「由吉普賽之旅喜馬拉雅包」下一個水平列表。

在這個列表中，我有一個帶有display：block的塊元素A;屬性。

這裏是我的簡化代碼：

HTML：

<div id="menu-board"> 
<ul> 
<li><a href="#">Elephant Safari Packages in Jim Corbett Park, India</a></li> 
<li><a href="#">Chopta Tungnath Trekking Package</a></li> 
<li><a href="#">River Rafting Packages in Rishikesh</a></li> 
</ul> 
</div>

CSS：

#menu-board 
{ 
    text-align: center; 
} 
#menu-board ul 
{ 
} 
#menu-board ul li 
{ 
    float: none; 
    display: inline-block; 
} 
#menu-board ul li a 
{ 
    display: block; 
    width: 180px; 
    height: 130px; 
    background-color: #C50000; 
    text-align: center; 
    overflow: hidden; 
}

現在，問題是：在第二個框我的鏈接文字，不會超過兩行，不像其他兩個框，其中鏈接文本分佈在三行中。這個框在IE和FireFox中看起來非常完美，但是當我在Google Chrome或Safari中打開該網站時，中間的框（文本相對較短）彈出。如果我使文本足夠長，可以跨越三行，它會回到原來的位置。我無法弄清楚如何解決這個問題。我不能簡單短暫地解決我的問題，我很抱歉。我對網頁設計相對缺乏經驗。如果你們能幫助我，我將非常感激。提前致謝。

來源

2012-07-09 Darshak Parmar

我試圖跟蹤下來，並期待在計算出的位置，實際上發現的Safari 5.1滴在別人下面的列表中最後一個元素。儘管如此，仍在尋找！ – MasonWinsauer 2012-07-09 20:30:56

好吧，經過更多的挖掘，我發現這是一個計算浮點問題。

我相信補充說：

#splash-list ul li a { 
    float:left; 
}

將解決這個問題。它在其他瀏覽器上的計算可能略有不同，但至少它們會處於適當的位置。

希望這會有所幫助！

梅森

來源

2012-07-09 20:45:04 MasonWinsauer

太棒了！這工作:)許多非常感謝您的時間，專業知識和快速的幫助。我已經實施了您的建議，並使用FireFox，Chrome，IE7和IE8進行了測試。至今工作順利。 – 2012-07-10 08:11:21

我在chrome上遇到了同樣的問題，float：left;解決了這個問題，謝謝@masonwinsauer – Sam 2013-03-02 21:10:29

li with display：inline-block;屬性在谷歌Chrome瀏覽器和Safari

回答

相關問題