Question

我想用Less设置IE8的不同背景图片，因为它不支持background-size。

我在Google上搜索过有关IE8黑客攻击的内容，结果是编写了这样的代码height: 300px\9;，以\9结尾。

我试过这个，但我发现它不支持background-image设置。

如果我这样写

.backgroundImage(@url) {
  background-image: url('@{base_url}@{url}.png');
  background-image: e("url('@{base_url}x/@{url}.png')\9");
}

#demo {
  .backgroundImage('large_cloud');
}

， Less编译器给出了错误，如果我像这样设置height: 300px\9;，编译器不会显示任何错误。

所以，我很困惑。如何使用Less hack在IE8中设置background-image。

Answer 1

编写Less是为了与适当的CSS兼容，因此在用于黑客攻击时可能无法正常工作。虽然像height和color（在下面链接的线程中）这样的一些黑客可能会起作用，但并不能保证一切都能正常工作。如果您需要使用hacks值进行正确编译，那么可以安全地为CSS escaping执行以下值：

#demo{
  background-image: ~"url('myimage-400px.png')\9";
}

或

#demo{
  background-image: e("url('myimage-400px.png')\9");
}

上面的解决方案纯粹是针对Less编译器错误的解决方案，如果实际上在IE8中有效，我也不会有太多想法。如果该方法不起作用，那么您可能需要查看this SO thread中建议的选项。

^{注意：这个问题与this one类似，但它不相同，因为这是关于属性名称插值的，而这个问题更多是关于值。}

Answer 2

你应该完全避免 hacks 。相反，有条件地为IE 8用户提供样式表，以解决您所面临的特定于版本的问题。

<link href="styles.css" rel="stylesheet" />
<!--[if IE 8]><link href="ie8.css" rel="stylesheet" /><![endif]-->

依赖句法怪癖常常会产生意想不到的副作用，并且通常会出现比广告更大的受影响范围。另一方面，条件注释本身就是为了应用特定于版本的指令而设计的。

Answer 3

这里是我使用的技术，以及在LESS中写入时编译它的技巧。

1）为不包含 background-size 属性的旧版浏览器编写背景css。例如：background:transparent url(/img/path-to-image-ie8.png) 0% 0% no-repeat;

2）为确实包含 background-size 属性的现代浏览器编写背景css。例如：background:transparent url(/img/path-to-image.png) 0% 0%/100% auto no-repeat;

旧浏览器无法识别第二行并将忽略它，现代浏览器将用第二行覆盖第一行。

让它在LESS中编译的技巧是像这样编写/： background:transparent url(/img/path-to-image.png) 0% 0%~"/"100% auto no-repeat;

为IE8

3 个答案: