html - Firefox でスパンとフォームの div が一致しないのはなぜですか

Question

次の html&css は chrome では正常に動作しますが、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で整列されていない理由がわかりませんが、クロムでは問題ありません。

Answer 1

これに慣れている

IDを定義する#green, #red vertical-align:top;

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

デモ

これに関する詳細情報

Answer 2

float: left;代わりに使用する必要がありますinline-block;

デモ

注：フロートをクリアすることを忘れないでください

Answer 3

float:left;上記に追加するだけで、 jsFiddle#red #greenを参照してください。

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