为什么将 img 的宽度设置为 css flexbox 排序的 div 内的百分比会给 div 增加额外的高度？

Question

你可以在这里看到额外的高度使用百分比的宽度(在firefox中):

http://jsfiddle.net/080xzqub/

如果你设置一个像素宽度，它没有额外的高度:

http://jsfiddle.net/080xzqub/1/

为什么会出现这种情况?我该如何解决这个问题?

编辑:这发生在Firefox

HTML:

 <div class="a"></div>
 <div class="b">
    <img src="http://flamesnation.ca/uploads/Image/BlackBox.jpg" />
 </div>

CSS with percentage:

body
{
    display: -webkit-box;
    display: -moz-box;
    display: box;   
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
.a
{
    position: relative;
    height: 100px;
    padding-left: 1em;
    padding-right: 1em;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
    background-color: red;
}
.b
{
    position: relative;
    height: 200px;
    padding-left: 1em;
    padding-right: 1em;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
    background-color: yellow;
}
img
{
    position: relative;
    width: 60%;
}

CSS with pixel width:

body
{
    display: -webkit-box;
    display: -moz-box;
    display: box;   
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
.a
{
    position: relative;
    height: 100px;
    padding-left: 1em;
    padding-right: 1em;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
    background-color: red;
}
.b
{
    position: relative;
    height: 200px;
    padding-left: 1em;
    padding-right: 1em;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
    background-color: yellow;
}
img
{
    position: relative;
    width: 400px;
}

Answer 1

这是缩放它，即宽度和高度的比例在两种情况下是相等的。我认为你也需要定义高度

img
{
    position: relative;
    width: 60%;
    height: 60%; <- here
}