IE8中内联块元素之间不需要的空间，显示为与父级高度相关的。

Question

在IE8中，移除内联块元素右侧的大空间有困难.

这似乎与事实上，父div有一个50%的高度，因为当我删除这种样式的布局工作在更大的规模。

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

希望有人能帮忙！

这是测试页和一个截图：

​

​

基本的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;。