1

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

我在 Google 中搜索了有关 IE8 hacks 的结果，结果是编写这样的代码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;这样设置，编译器不会显示任何错误。

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

4

3 回答 3

2

Less 被编写为与适当的 CSS 兼容，因此在用于 hack 时它可能并不总是正常工作。虽然像heightand color（在下面链接的线程中）这样的一些技巧可能会起作用，但并不能保证一切都会起作用。如果您需要带有 hacks 的值才能正确编译，那么对如下值进行CSS 转义是安全的：

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

或作为

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

上述解决方案纯粹是针对 Less 编译器错误的一种解决方案，我不太清楚它是否真的适用于 IE8。如果该方法不起作用，那么您可能需要查看此 SO 线程中建议的选项。

注意：这个问题与这个问题相似，但不一样，因为这是关于属性名称插值，而这个问题更多的是关于值。

于 2016-01-18T05:09:13.763 回答
0

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

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

依赖语法怪癖通常会导致意想不到的副作用，并且通常会带来比宣传的更大的影响范围。另一方面，条件注释本质上是为应用特定于版本的指令而设计的。

于 2016-01-18T05:17:21.573 回答
0

这是我使用的技术以及在用 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;

于 2016-01-18T05:49:20.293 回答