CSS内容图片不会出现在IE中

Question

我的默认浏览器是Chrome，但我决定查看我的网站是否适用于其他浏览器。在Chrome中，标题有我的徽标，我使用了内容：url，因此它的质量更好。但是，当我使用Internet Explorer 11访问我的网站时，我仍然可以单击该图像，但它不会显示。我的网站是http://www.clinkstr.com 它只是与IE不兼容。如果是这样，即使放大了，我的徽标是否还有其他选择可以保持高质量？如果没有，我该如何解决？

Answer 1

content属性适用于::before和::after等伪元素。这由W3C，Microsoft Developer Network和（见下文）MDN记录：

Chrome似乎支持常规元素（以非标准方式）。如果您希望这与跨浏览器兼容，请采用标准方法并在伪元素上使用它。

始终在多个浏览器中提前测试;不这样做可能会伤到你。在这种情况下，您将Chrome的行为解释为可靠，即使它与标准不同。 Firefox和Internet Explorer都遵循该标准，因此仅将content应用于伪元素。

Answer 2

为什么要加载这么大的徽标图片。即使缩小尺寸，它看起来也不好。 您还可以使用背景大小缩小徽标尺寸。

#pageTop > #pageTopWrap > #pageTopLogo > a {
  background: url("../images/logo.png") no-repeat scroll 0 0 / 40px auto rgba(0, 0, 0, 0);
  float: left;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  width: 40px;

}

IE 8 https://github.com/louisremi/background-size-polyfill