当其他浏览器推倒时，Firefox推高了

Question

当图片变得太大时，Firefox会将它们推上去，而其他浏览器会将它们推下去（就像我想要的那样）

首先是Firefox如何做到这一点，第二个是其他浏览器如何做到以及我希望它如何工作。当你注意到第二个文本全部在同一行，而第一个没有。

HTML

<div id="trees">
    <div class="tree">
        <img src="http://clipartsy.com/Holidays/Christmas/Xmas/christmas_tree_icon_xmas-1969px.png" width='150' height='186' value='Doel A' />
        <div class="subtext">
            Het vergeten kind
        </div>
        </div>
        <div class="tree">
            <img src="http://clipartsy.com/Holidays/Christmas/Xmas/christmas_tree_icon_xmas-1969px.png" width='150' height='186' value='Doel B' />
        <div class="subtext">
                Kind en brandwond
        </div>
        </div>
        <div class="tree">
            <img src="http://clipartsy.com/Holidays/Christmas/Xmas/christmas_tree_icon_xmas-1969px.png" width='150' height='186' value='Doel C' />
            <div class="subtext">
                Kinderen van de Voedselbank
            </div>
        </div>
    </div>

CSS：

#trees{
width: 100%;
height: 240px;
}

.tree{
    position: static;
    display: inline-block;
    margin: 10px 0;
    height: 186px;
    color: #860037;
    width: 180px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

.tree img{
    display: block;
    margin: 0 auto;
    padding-top: 20px;
    text-align: center;
}

FIDDLE

Answer 1

将vertical-align: top;添加到.tree以沿顶边而不是基线对齐元素。

#trees{
  width: 100%;
  height: 240px;
}
.tree{
  position: static;
  display: inline-block;
  margin: 10px 0;
  height: 186px;
  color: #860037;
  width: 180px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  vertical-align: top;
}
.tree img{
  display: block;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
}

<div id="trees">
    <div class="tree">
        <img src="http://clipartsy.com/Holidays/Christmas/Xmas/christmas_tree_icon_xmas-1969px.png" width='150' height='186' value='Doel A' />
        <div class="subtext">
            Het vergeten kind
        </div>
        </div>
        <div class="tree">
            <img src="http://clipartsy.com/Holidays/Christmas/Xmas/christmas_tree_icon_xmas-1969px.png" width='150' height='186' value='Doel B' />
        <div class="subtext">
                Kind en brandwond
        </div>
        </div>
        <div class="tree">
            <img src="http://clipartsy.com/Holidays/Christmas/Xmas/christmas_tree_icon_xmas-1969px.png" width='150' height='186' value='Doel C' />
            <div class="subtext">
                Kinderen van de Voedselbank
            </div>
        </div>
    </div>