html - スパンはFirefoxでオフセットされていますが、Chromeではオフセットされていません

Question

私のHTMLは本当にシンプルです

<div class="btns">
    <div id="green">    <span 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

.btns {
    position: relative;
}

#green, #red {
    display: inline-block;
    width: 49%;
    position: relative;
}
.green_btn, .red_btn {
    margin-bottom: 4px;
}

あなたがここで見ることができるようにhttp://jsfiddle.net/HajHV/9/

クロームではこのように見えます

しかし、Firefoxでは

この違いがわかりません。html / cssには、これに関係するものは何もありません。どうすれば修正できますか？

Answer 1

display: inline-block;に追加.green_btn, .red_btn {...}

Answer 2

追加vertical-align:top

#green, #red {
    display: inline-block;
    width: 49%;
    position: relative; vertical-align:top
}

デモ

Answer 3

または、試してください：

.btns {
    position: relative;
}

#green, #red {
    display: inline-block;
    width: 49%;
    position: relative;
}
.green_btn, .red_btn {
    margin-bottom: 4px;
}
#green {
    float:left;
}

#red {
    margin-left: 4px;
}