li with display:inline-block; 属性在Google Chrome和Safari中跳了下来

Question

我正在尝试建立一个网站,并遇到一个棘手的问题,李显示: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;
}

将解决问题.它可能在其他浏览器上的计算方式略有不同,但至少它们会处于正确的位置.

希望这可以帮助!

石匠