CSS网址（）在Internet Explorer中无法识别10

我有这条线在我的CSS：CSS网址（）在Internet Explorer中无法识别10

.ui-icon-zoom-in { content: url(images/16x16/ZoomIn.png); }

对此我有jQuery UI Button widget使用这样的：

$("#zoomin").button({ text: false, icons: { primary: "ui-icom-zoom-in" } });

在Chrome中，我可以看到按钮中心的图像。但是，在IE10中，我没有看到图像。

我在这里错过了什么吗？

来源

2013-04-21 Klaus Nji

您是否声明了文档类型？我知道IE浏览器有时不支持CSS3，除非您在第一行声明HTML5文档类型： '<！doctype html>' 在正确的CSS中，'content'标签只在'之前'和'伪'之后有效元素。使用jquery添加图像可能会更好。 – 2013-04-21 14:57:19

是的。我在_Layout.cshtml中声明了<！DOCTYPE html> – 2013-04-21 15:25:13

正如我下面所说的，除了'：before'和'：after'伪元素之外的任何东西，你都不能使用'content'。 Chrome不应该呈现它。（我知道，喘气，因为一旦IE是一个正确的行为！） – 2013-04-21 15:30:19

content属性仅在伪元素之前和之后有效。你应该将其更改为：

.ui-icon-zoom-in { 
    background: url(images/16x16/ZoomIn.png) no-repeat; 
    width:16px; 
    height:16px; 
}

从

除此之外，IE8 +如果指定一个有效的DOCTYPE是只支持content财产。

来源

2013-04-21 14:59:15

这对可达性很差，使用高对比度模式的人不会将图像设置为“背景”。 – 2013-04-21 15:00:17

@Niels，这对我也不起作用。 – 2013-04-21 15:53:11

@Oshawott我只是回答这个问题，我不认为有效的解决方案应该有一个'img'元素和适当的'alt'属性。 – 2013-04-21 16:56:35

content属性只接受:before和:after CSS3中的伪元素。你或许应该使用jQuery选择将图像追加到对象：

$("#zoomin").html("<img src='images/16x16/ZoomIn.png' alt='Zoom In'>");

来源

2013-04-21 15:02:54

谢谢你，但我不想在代码中硬编码图像位置。我想要坚持jQuery UI推荐的模式。 – 2013-04-21 15:30:47

在这种情况下，使用一个'：before'元素，其绝对位置为0,0，并带有'content' CSS标签。它在语义上不正确，但应该工作。就像'.ui-icon-zoom-in：before {top：0px; left：0px;位置：绝对的; content：url（images/16x16/ZoomIn.png）; }'然后用'position：relative'使'.ui-icon-zoon-in'成为0px宽，0px高。 – 2013-04-21 15:32:48

再次感谢。 “make .ui-icon-zoom-in 0px wide，0px high with position：relative”是什么意思？我对这个东西很陌生，所以代码更好。 – 2013-04-21 15:39:32

我有同样的情况在IE 11 内容是<div class="image"> </div> 所以在Chrome它的工作原理是这样

.image { 
    content: url("image.jpg"); 
}

要使它在IE中工作，我已将content选项设置为:after元素。像

.image:after { 
    content: url("image.jpg"); 
}

来源

2017-10-12 09:50:53 stopanko

CSS网址（）在Internet Explorer中无法识别10

回答

相关问题