WebKit中

inline-block的CSS問題，要看到問題，請訪問：問題http://justinzaun.com/LCARS/WebKit中

兩個CSS塊位於在鏈接的css文件行260和284。具體來說，它的顯示：兩者都是內聯塊 - 我想。

在FF中看起來正確。我不確定在IE中，因爲我還沒有測試過它。在webkit（鉻和Safari）它看起來不對。

任何想法如何解決它？

謝謝！

編輯（添加圖像和說明）： alt text

alt text

從FF頂部圖像它和它看起來不錯。底部圖像來自webkit。請注意，2個按鈕和標籤按下了大約5個像素。文字下沒有空格。

來源

2010-12-19 Justin808

8之前的IE不允許內聯塊，除了默認顯示的元素：內聯。如果IE 7等對你來說很重要，那麼你可能需要完全重新考慮你的設計（是的，如果沒有內聯塊，這是一件非常痛苦的事情）。 – ysth 2010-12-19 06:33:44

@ysth：如果我能在webkit，FF和IE8 +中工作，我會很高興:) IE9應該很快就會出來，不得不支持IE6＆7，對我來說不值得。關於webkit問題的任何想法？ – Justin808 2010-12-19 06:36:31

不，我不知道。抱歉。 – ysth 2010-12-19 06:48:49

試試這個代碼：

<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個類中。

來源

2010-12-19 07:05:01

這可行，我可以使用它，但我想知道爲什麼內聯塊在webkit中不起作用。如果沒有使用內聯塊發佈的修復，我會將其標記爲正確的。 – Justin808 2010-12-19 07:11:41

我更新了我的答案，試試看。 – 2010-12-19 07:18:52

vertical-align：block不會做任何事情。想到一個浮動：留下一個顯示：inline-block;作品。我會堅持你的原始修補程序。 – Justin808 2010-12-19 07:23:32

回答

相關問題