2

我的网站上有一个 900 像素宽的徽标标题图像，它适合一个容器，可以将其缩小以适合标题栏；原因是为适合标题栏而创建的图像在高分辨率移动设备上看起来很糟糕。

我发现我的图像在 chrome 中看起来非常好，但在 IE10 中它看起来令人震惊。你自己看; www.cmvisual.com

我已经尝试使用 -ms-interpolation-mode:bicubic 代码来尝试解决这个问题，但它似乎不起作用（快速浏览 ms 网站说它已经过时了？）。

这是我的代码：

    <html>
    <head>
            <title>Chris MacDonald Visualisation</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href = "css/bootstrap.min.css" rel = "stylesheet">
            <link href = "css/styles.css" rel = "stylesheet">
            <style>
                img.highqual { -ms-interpolation-mode:bicubic; }
                img.nearestn { -ms-interpolation-mode:nearest-neighbour; }
            </style>
    </head>
    <body>

            <div class = "navbar navbar-inverse navbar-static-top" Role = "Navigation">
                <div class = "container">

                    <div class = "navbar-inside pull-left">
                        <a href = "index.html">
                                <img class = "logo1" src = "img/motif.png" class = "highqual">
                        </a>
                    </div>

我是否遗漏了什么，有人对如何解决这个问题有任何建议吗？我考虑过可能包含标签以在不同设备上显示不同版本的图像，但这似乎很耗时并且是一种廉价的解决方法？

非常感谢任何花时间提供帮助的人。

4

1 回答 1

3

我在 IE10 图像下采样方面也遇到了一些问题，正如您所指出的，IE10 不再支持专有的 css 样式（而且从 IE9 开始）。有一些类似这样的 js 相关修复，但是，对于您的具体情况，我建议使用 svg 徽标（如果您不需要支持 IE8），而不是 png。你可以在这里找到很好的信息。

于 2014-11-17T17:26:52.183 回答