7

我的 CSS 中有这一行： 

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

我正在使用这样的jQuery UI Button 小部件：

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

在 Chrome 中，我可以看到按钮内居中的图像。但是，在 IE10 中，我看不到图像。

我在这里错过了什么吗？

4

4 回答 4

15

该content属性仅对 :before 和 :after 伪元素有效。您应该将其更改为：

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

除此之外，IE8+ 仅content在指定了有效的 DOCTYPE 时才支持属性。

于 2013-04-21T14:59:15.990 回答
2

该content属性仅在 CSS3 中的伪元素上被:before接受:after。您可能应该使用 jQuery 选择器将图像附加到对象：

$("#zoomin").html("<img src='images/16x16/ZoomIn.png' alt='Zoom In'>");
于 2013-04-21T15:02:54.417 回答
2

我在 IE 11 中遇到了同样的情况。内容是<div class="image"> </div> 所以在 Chrome 中它是这样工作的

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

为了让它在 IE 中工作，我将content选项设置为:afterelement。像

.image:after {
  content: url("image.jpg");
}
于 2017-10-12T09:50:53.613 回答
0

可以使用该box-sizing属性来保持尺寸，将新图像添加为背景图像，并通过以下方式“推出”现有（旧）内联图像padding-left：

.image{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(https://yourdomain/yoursite/yourasset.png) no-repeat;
  width: 20px; /* Width of new image */
  height: 25px; /* Height of new image */
  padding-left: 20px; /* Equal to width of new image */
}

box-sizing具有良好的网络浏览器支持：https ://caniuse.com/#feat=css3-boxsizing

采用自：https ://css-tricks.com/replace-the-image-in-an-img-with-css/

于 2020-06-30T08:44:07.197 回答