Question

请使用IE8查看此网站Here。您可能会注意到底部，某些图标的两侧都有箭头。

在本地，箭头出现在两侧，但它们被压缩到大约10个像素，它们应该是60px乘44px。在服务器上查看时，它们看起来不会被挤压，但它们位于图标的上方和下方。不确定去哪个方向。

在Chrome浏览器中查看时，它们显示正常，并且它们位于3个图标的两侧，应该是这样。他们在IE8中搞砸了。我一直在玩这个CSS（内联块），但无济于事。

#nav_arrow {
    display: inline-block !important;   
    }

以下是该区域的HTML ...

    <p align="center">

        <div id="nav_arrow">
        <a href="index.html"><img src="images/icons/arrow_left.png" width="60" height="44"></a>
            <img src="images/spacer-10px.png"></div>

        <a href="index.html"><img src="images/icons/home_75x75.png" alt="" title="Welcome!"></a>
            <img src="images/spacer-10px.png">

        <a href="national_presence.html"><img src="images/icons/locations_75x75.png" alt="" title="Our Locations!"></a>
            <img src="images/spacer-10px.png">

        <a href="accreditation.html"><img src="images/icons/accreditation_75x75.png" alt="" title="Our Accreditation!"></a>
            <img src="images/spacer-10px.png">

        <div id="nav_arrow">
        <a href="accreditation.html"><img src="images/icons/arrow_right.png" width="60" height="44"></a>
            <img src="images/spacer-10px.png"></div>


    </p>

我试过移动标签，将所有内容包装在一个容器中，更改了doctype，但我没有运气。

有什么想法？

Answer 1

试试这个：

#nav_arrow {
    display: inline;
    zoom: 1;
}

Answer 2

罪魁祸首是出乎意料的人：

img { max-width: 100%;

IE 8的行为与图像上max-width的其他浏览器的行为不同。值得一看的是：

 If the containing block's width depends on this element's width, then the
 resulting layout is undefined in CSS 2.1.

这是这种情况。所以公平地说，IE并不完全错误。

建议的修复

display: inline;
zoom: 1;

是IE的黑客攻击＆lt; 8.结果类似于display: inline-block。这是一个幸运的巧合，max-width图像在IE 7兼容模式下按预期工作。也许在IE 7中，我不知道。因此，您可以通过此hack触发IE 7渲染模式，这就是它的工作原理。

内联块是不是与ie8一起工作？

2 个答案: