Css IE8中内联块元素之间不需要的间距与父级高度相关

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

这似乎与父div的高度为50%这一事实有关，因为当我删除此样式时，布局的大小会更大

注意，IE7和IE9+中的布局很好。在我开始使用HTML5shiv来处理

元素之前，同样的问题也发生了，所以我忽略了这一点

希望有人能帮忙

以下是示例和屏幕截图：

基本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>

---

对IE使用

display:inline

，并保持

display:inline块用于其他浏览器..
我不知道这里发生了什么，但这里有一个提示：在
html
中使用
inline block
空格可能会导致不必要的间隙，试着给你的html一个缩小效果，看看这是否有帮助。一个选项可以不使用
内联块
而使用
display:block
和
float:left
谢谢connor.js，但不确定你所说的html缩小效果是什么意思？同样感谢Pattle，但是我已经花了很多时间在这个布局上，我想坚持使用
inline block
。属性
inline block
为元素添加了4px的边距，这里有一个避免这些空格的技巧列表，谢谢ppollono，但我们讨论的不仅仅是4px。我添加了一个屏幕截图来显示我的意思。谢谢，但我试过了。事实上，我在IE7上使用它。但是当我把它加入到IE8中的时候，也没什么区别。试试看，卡罗琳·伊莉莎。将很快回复您。请尝试提供display:inline\0/；清除：左\0/；图形标记和显示：内联\0/类库图标\0/是IE8 CSSThanks的黑客，用于澄清Kishori！我的意思是，我在设置为
内联块的所有元素上都尝试过它，但显然不是专门在
.gallery项上尝试过。
.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;
}