Q

css對齊問題與溢出和內嵌對象與溢出：隱藏

html
css

2012-01-06 91 views 1 likes

1

我想有一個div顯示：內嵌塊溢出：隱藏。我的問題是overflow：hidden會壓下相鄰的內嵌塊元素。css對齊問題與溢出和內嵌對象與溢出：隱藏

示範： http://jsfiddle.net/vNDmX/

誰能解釋爲什麼出現這種情況？我該如何解決呢？

更新：這是一個特定於Firefox的問題。浮動：左側有點作用，但它仍然以間距排列：http://jsfiddle.net/vNDmX/3/。

2012-01-06 Blazes

+0

你可以發佈你的CSS？ – Brian 2012-01-06 21:34:29

+0

您發佈的演示不會概述問題。 – Wex 2012-01-06 21:34:35

+1

它在Firefox中。 – 2012-01-06 21:36:26

A

回答

5

這是一個Firefox特定的錯誤（這裏的a related question我發現調查這時候）。修復似乎是設置vertical-align: top。

下面是修復的例子，以及一些邊境添加到顯示內容：

http://jsfiddle.net/vNDmX/5/

button { 
    vertical-align: top; 
}

2012-01-06 21:43:23 Nate

+1

這正是我所期待的。如果我能給你+10，我會的！感謝m8！ – Blazes 2012-01-06 21:46:12

+0

@Blazes對於各種其他佈局問題，使用'display：inline-block;'時，您應該幾乎總是使用'vertical-align：top;'。 – ThinkingStiff 2012-01-06 21:48:18

+0

很高興幫助！ – Nate 2012-01-06 21:49:18

1

嘗試使用float：

HTML5：

<!DOCTYPE HTML> 
<html lang="en"> 
    <head></head> 
    <body> 
     <button id="button1">Button1</button> 
     <button id="button2">Button2</button> 
    </body> 
</html>

的Javascript：

$(document).ready(function(){ 
    var wrapper = '<div style="display:block;float:left;" />'; 
    $('#button1').wrap(wrapper); 
});

2012-01-06 21:41:23

+0

變了，不便之處。 – 2012-01-06 21:48:04

0

看起來好像設置在div溢出導致它失去跟蹤的地方其基線是。其基線應該是button的基線，但它是button的底部。這意味着第二個button會嘗試將其基線調整到錯誤的位置。解決此問題的一種方法是在div上使用vertical-align: bottom;。

2012-01-06 21:45:41 Neil

相關問題