Not displaying image on IE-11 , when its given as background of a display:table-cell 's before pseudo-element

Question

There is a problem in displaying background image in IE-11 browser.

I have given bg-img to the '::before' of a span tag which has given 'display: table-cell' propery. There are no problems with the rest of the browsers except IE-11 (I couldn't check with safari).

I know, there are few other techniques to get it work. but i don't want that

It will be grateful , if someone tell me why it is not working only in IE, Is it a problem with table-cell propery or Can't we give pseudo-element to table-cell.

Thank you

please find

.Jsfiddle

https://quirksmode.org/css/css2/display.html IE8 does support table cell but it exhibits a [little strange behaviour sometimes](https://stackoverflow.com/questions/4608278/internet-explorer-8-ignores-width-for-display-table-cell-element). — Pirate X, Mar 23 '18 at 08:45

score 0 · Answer 1 · answered Mar 23 '18 at 08:57

Is it a problem with table-cell property?

Yes ,you should change the display property of span and a

Open this snippet in IE 11

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: inline-block;
  padding: 15px;
}
ul li a {
  padding-left: 30px;
  display: inline-block;;
  text-decoration: none !important;
}
ul li a span {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}
ul li a span.img {
  margin-right: 15px;
  width: 50px;
  height: 50px;
}
ul li a span.title {
  padding-left: 20px;
}
ul li a span.img:before {
  content: "";
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url("https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}
ul li a span.img:hover:before {
  background: url("https://i2.wp.com/creativecompetitor.com/wp-content/uploads/2014/03/baby-rabbits.jpg");
}

<div class="container">
  <ul> 
    <li>
      <a href="#">
        <span class="img"></span>
        <span class="title">Title one</span>
      </a>         
    </li>
    <li>
      <a href="#">
        <span class="img"></span>
        <span class="title">Title Two</span>
      </a>  
    </li>
  </ul>
</div>

Not displaying image on IE-11 , when its given as background of a display:table-cell 's before pseudo-element

1 Answers1