li with display: inline-block; Google Chrome 和 Safari 中的属性跳跃

Question

我正在尝试建立一个网站，但遇到了一个棘手的问题，即 li 的 display: inline-block;属性。

我的网站是：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 中打开该站点时，中间的框（文本相对较短）会弹出。如果我使文本足够长以跨越三行，它就会回到原来的位置。我无法弄清楚如何解决这个问题。我很抱歉无法以简单而简短的方式解决我的问题。我对网页设计相对缺乏经验。如果你们能帮助我，我将不胜感激。提前致谢。

Answer 1

好的，经过更多挖掘，我发现这是一个计算浮点问题。

我相信添加：

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

将解决问题。它在其他浏览器上的计算可能略有不同，但至少它们会在正确的行中。

希望这会有所帮助！

梅森