Question

我正在尝试在IE7 / 8中创建一个网站功能。我已经实现了一个脚本来为我的客户端调整HTML5，但我遇到了另一个问题：我正在使用矢量图像（.SVGs）用于一些徽标和社交图标，这会导致IE7和IE8在页面加载时挂起

我的问题是，是否可以使用某种条件语句来加载IE7 / 8，例如.jpg的矢量版本，以便正确加载页面？

以下是代码中大多数这些矢量图像的样子：

<img src="images/logo.svg" alt="-Company Name-">

Answer 1

如果您希望某些内容仅出现在特定版本号以下的IE版本中，请使用：

<!--[if lte IE 8]>，意思是“小于或等于”。

有关条件评论的更多信息，请参阅例如quirksmode.org页面。

示例：

<!--[if lte IE 8]> Displays in IE8 and below only <![endif]-->
<!--[if gt IE 8]> Displays in IE9 and above only <![endif]-->

Answer 2

使用CSS作为背景图像，解决方案将更加清晰。

#svg {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg');
    width: 667px;
    height: 800px;
    background-size: contain;
}

/* IE6 */
* html #svg { 
    background-image: url('otherurl');
}

/* IE7 */
*+html #svg { 
    background-image: url('otherurl');
}

在现代浏览器中查看 http://jsbin.com/eVogAdu/1/edit

仅针对IE6和IE7查看主页面 http://jsbin.com/eVogAdu

切换IE7 / 8的矢量图像

2 个答案: