0

请使用IE8浏览本网站。您可能会注意到，在底部，某些图标的两侧都有箭头。

在本地，箭头出现在两侧，但它们被压缩到大约 10 像素，并且应该是 60 像素 x 44 像素。在服务器上查看时，它们并没有被压扁，但它们位于图标的上方和下方。不知道该往哪个方向走。

在 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>

我尝试过移动标签，将所有内容包装在一个容器中，更改文档类型，但我没有运气。

有什么想法吗？

4

2 回答 2

2

尝试这个：

#nav_arrow {
    display: inline;
    zoom: 1;
}
于 2013-07-05T19:19:57.597 回答
1

罪魁祸首是一个意想不到的人：

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 < 8 的 hack。结果类似于display: inline-block. max-width在 IE 7 兼容模式下，图像按预期工作，这是一个令人高兴的巧合。也许在 IE 7 中也是如此，我不知道。因此，您可以通过此 hack 触发 IE 7 渲染模式，这就是它起作用的原因。

于 2013-07-05T21:00:50.157 回答