减少 IE8 的 hack background-image

Question

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

我在 Google 中搜索过关于 IE8 的 hack，结果是编写这样的代码 height: 300px;，以 </code> 结尾。</p> <p>我试过了，但我发现它不支持 <code>background-image 设置。

如果我这样写

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

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

, Less 编译器会报错，如果我这样设置 height: 300px;，编译器不会显示任何错误。

所以，我很困惑。如何使用 Less hack 在 IE8.

中设置 background-image

Answer 1

Less 是为了与正确的 CSS 兼容而编写的，因此当用于 hack 时它可能并不总是正常工作。虽然 height 和 color（在下面链接的线程中）等一些 hack 可能会起作用，但不能保证所有这些都会起作用。如果您需要具有 hack 的值才能正确编译，那么可以安全地为以下值执行 CSS escaping：

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

或

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

以上解决方案纯粹是针对 Less 编译器错误的解决方案，我不太清楚它是否真的适用于 IE8。如果该方法不起作用，那么您可能需要查看 this SO thread.

中建议的选项

^{注意：这个问题类似于this one但不一样，因为那是关于属性名称插值而这个更多的是关于价值观。}

Answer 2

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

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

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

Answer 3

这是我使用的技术以及在用 LESS 编写时让它编译的技巧。

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

2) 为包括 background-size [=36] 的现代浏览器编写背景 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 的 hack background-image

Less hack background-image for IE8

css

css-hack

less

internet-explorer-8