webkit中的内联块CSS问题

Question

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

所讨论的两个css块位于链接的css文件中的第260和284行.特别是它的显示:两者都是内联块 - 我想.

这看起来在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类.线(260,284和308).

UPD:如果您仍想使用inline-block- 尝试添加vertical-align:top到所有3个班级.