css - webkit 中的内联 block CSS 问题

Question

要查看问题，请访问:http://justinzaun.com/LCARS/

有问题的两个 css block 位于链接的 css 文件中的第 260 行和第 284 行。具体来说，就是两者的 display: inline-block - 我认为。

这在 FF 中看起来是正确的。我不确定在 IE 中，因为我还没有测试过。在 webkit(chrome 和 safari)中它看起来是错误的。

知道如何修复它吗？

谢谢!

编辑(添加图像和解释):

上面的图片来自 FF，看起来不错。下图来自webkit。请注意，2 个按钮和标签被向下推了大约 5 个像素。文本下方没有空格。

Answer 1

试试这个代码:

<div class="buttonbar">
    <div class="largebutton" style="float:left;display:block;">
        Label
    </div>
    <div class="button" style="float:left;display:block;">
        Label
    </div>
    <div class="label" style="float:left;display:block;">
        A label to disply text in... Fun Times...
    </div>
    <div class="spacer"></div>      
</div>

或者将 float:left;display:block; 添加到 .largebutton、.button 和 .label > 类(class)。行(260、284 和 308)。

UPD:如果您仍然想使用 inline-block - 尝试将 vertical-align:top 添加到您的所有 3 个类中。