图像在 IE 中垂直而不是水平对齐？答案

【问题标题】：Images aligning vertically instead of horizontally in IE?图像在 IE 中垂直而不是水平对齐？
【发布时间】：2013-11-19 00:53:20
【问题描述】：

我对 IE 中的一些图像有疑问，它们是垂直对齐而不是水平对齐，但是它们在所有其他浏览器中都可以吗？此外，当使用 IE8 和 7 时，图像根本不显示！有没有办法解决这个问题？我在下面附上了我的代码：

<div class="header_right_christmas">
            <div class="preflang_christmas">
                    <a href="#" class="delivery_xmas">
                    </a>

                    <a href="#" target="_blank" class="facebook_xmas">
                    </a>

                    <a href="#" target="_blank" class="twitter_xmas">
                    </a>

                    <a href="#" target="_blank" class="pintrest_xmas">
                    </a>

                    <a href="#" target="_blank" class="google_xmas">
                    </a>
</div>

.preflang_christmas {float:right; display:inline-flex;}

.delivery_xmas {
height:40px;
width:196px;
display:block;
background-image:url('myimage.png')no-repeat;
}

.delivery_xmas:hover {
background-image:url('myimage.png');
}

.facebook_xmas {
width:40px;
height:40px;
display:block;
background:transparent url('myimage.png')no-repeat;
}

.facebook_xmas:hover {
background-image:url('myimage.png');
}

.twitter_xmas {
height:40px;
width:40px;
display:block;
background:transparent url('myimage.png')no-repeat;
}

.twitter_xmas:hover {
background-image:url('Christmas_Homepage_Images/twitter.png');
}

 .pintrest_xmas {
height:40px;
width:40px;
display:block;
background:transparent url('Christmas_Homepage_Images/pintrest_bw.png')no-repeat;
}

 .pintrest_xmas:hover {
background-image:url('Christmas_Homepage_Images/pintrest.png');
}

 .google_xmas {
height:40px;
width:40px;
display:block;
background:transparent url('Christmas_Homepage_Images/google_plus_bw.png')no-repeat;
}

.google_xmas:hover {
background-image:url('Christmas_Homepage_Images/google_plus.png');
}

【问题讨论】：

如果您在 css 中将 blocks 更改为 inline-block 会发生什么？
IE7-9 不支持任何类型的 flexbox 布局。 10 有部分支持。
在你的 css 中用于图像使用：vertical-align: middle;
IE7-9 有什么解决方法吗？
@Adsy 我设法修复它我真的不知道它是如何/为什么起作用的，但我刚刚从背景图像中删除了no-repeat，它现在显示了！谢谢你的帮助！ :)

标签： html css image alignment

【解决方案1】：

通过从背景图像中删除 no-repeat 来修复！

【讨论】：