html - 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>