爲什麼跨度和形式DIV不能在Firefox

對準下面的HTML & CSS工作正常Chrome，但在Firefox它不對齊爲什麼跨度和形式DIV不能在Firefox

<div class="btns"> 
    <div id="green">  
<span id="cls" class="btn btn-block btn-large btn-success disabled green_btn">Green</span> 

    </div> 
    <div id="red"> 
     <form class="button_to" > 
      <div> 
       <input class="btn btn-block btn-large btn-danger red_btn" type="submit" value="Red"> 
      </div> 
     </form> 
    </div> 
</div>

CSS

#cls:hover { 
    background:black; 
    cursor:pointer; 
} 
.btns { 
    position: relative; 
} 
.num { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    text-align: center; 
} 
#green, #red { 
    display: inline-block; 
    width: 49%; 
    position: relative; 
} 
.green_btn, .red_btn { 
    margin-bottom: 4px; 
}

這裏是jsfiddle

我不明白他們爲什麼沒有在Firefox中對齊，但在鉻他們很好。

來源

2013-04-22 Nick Ginanto

用於本

定義您#green, #redIDvertical-align:top;

#green, #red { 
    display: inline-block; 
    vertical-align: top;}

Demo

更多information about this

來源

2013-04-22 07:21:54

謝謝！任何想法爲什麼他們的身高不一樣？ – 2013-04-22 07:27:52

喜@NickGinanto更多關於這http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ – 2013-04-22 07:31:37

您應該使用的float: left;代替inline-block;

Demo

注意：不要忘記清除你的花車

來源

2013-04-22 07:21:30

是squishes在一起，它不會使它看起來像它是從我的小提琴 – 2013-04-22 07:27:35

鉻@NickGinanto，如果你需要的間距可以提供'保證金right'，你應該使用'floats'爲了這些目的而不是'inline-block' – 2013-04-22 07:30:28

你只需要添加float:left;以上#red #green看到jsFiddle。

#green, #red { 
    display: inline-block; 
    width: 49%; 
    position: relative; 
    float:left; 
}

來源

2013-04-22 07:23:07

遺憾但反轉的順序，不使它看起來像它在鉻 – 2013-04-22 07:26:53

爲什麼跨度和形式DIV不能在Firefox

回答

相關問題