IE8中的内联块元素之间的不需要的空间似乎与父高度相关

Question

在IE8中删除内联块元素右侧的大空间时遇到问题。

似乎与父div的高度为50％有关，因为当我删除此样式时，布局的工作尺寸会更大。

注意IE7和IE9 +中的布局很好。因为在之前发生同样的问题我开始使用HTML5shiv来处理<figure>元素，我忽略了这个因素。

希望有人可以提供帮助！

以下是test page和屏幕截图：

基本HTML：

<div class='gallery'>
    <div class='gallery-row'>
        <figure class='gallery-item'>
            <div class='gallery-icon '>
                <a class='fancybox' rel='fancybox-2' href=# >
                    <img width="267" height="400" src="xxx/wp-content/uploads/11-267x400.jpg" />
                </a>
            </div>
        </figure>
        <figure class='gallery-item'>
            <div class='gallery-icon '>
                <a class='fancybox' rel='fancybox-2' href=# >
                    <img width="665" height="400" src="xxx/wp-content/uploads/2-665x400.png" />
                </a>
            </div>
        </figure>
    </div>
</div>

和CSS：

.gallery {
    height:50%;
    line-height:0;
}
.gallery-item {
    display:inline-block;
    margin:0 10px 5px 0;
}
.gallery-item:last-child {
    margin:0 0 5px 0;
}
.gallery-row, .gallery-item, .gallery-icon  {
    height:100%;
}
img {
    height:100%;
    max-height: 100%;
    width:auto;
}

Answer 1

对IE使用display:inline。并为其他浏览器保留display: inline-block; ..