css url() not recognized in internet explorer 10

Question

I have this line in my CSS:

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

Which I am using with jQuery UI Button widget li

Answer 1

I had the same situation in IE 11. The content is <div class="image"> </div> So in Chrome it works like this

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

To make it Works in IE i have set the content option to :after element. Like

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

Answer 2

One can use the box-sizing property to keep the dimensions, addind the new image as background image and pushing "out" the existing (old) inline-image by 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 has a good webbrowser-support: https://caniuse.com/#feat=css3-boxsizing

Adopted from: https://css-tricks.com/replace-the-image-in-an-img-with-css/

Answer 3

The content property is only accepted on :before and :after pseudo-elements in CSS3. You should probably use a jQuery selector to append the image to the object:

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

Answer 4

The content property is only valid on :before and :after pseudo-elements. You should change it to:

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

Apart from that, IE8+ only supports content property if a valid DOCTYPE is specified.